前言

接續昨天討論，
今天來探討containing block如何影響position屬性，
或者說是position屬性如何影響containing block。

為什麼containing block很重要？

定位（position）：position不同屬性值的位置在containing block影響下是如何算出來的。

百分比計算（%）：很多 % 寬高或邊距，是相對於containing block來算的。

重排(reflow)與重繪(repaint)效率：兩者與瀏覽器如何處理 DOM 變更並更新頁面顯示有關，瀏覽器會根據containing關係來安排渲染順序與效能優化。

排版邏輯理解：理解containing block的運作有助於排版邏輯的理解，可以更精確地控制元素的布局，並且預測不同元素之間的交互行為。

識別containing block

這裡我將仔細說明 position 五種不同屬性值對containing block有何影響。

static、relative、sticky

當非根(root)元素的 position 屬性是static、relative或是sticky，則containing block是由最接近的ancestor element的content box edge(邊緣)所形成，該ancestor element可以是以下之一：
1.block container（例如：inline-block、block）；
2.建立formatting context（例如：flex container、grid container、或是block container自己本身）。
(取自Mdn)

上述意思是，當一個元素的 position 屬性值為 static、relative 或 sticky 時，containing block 通常是該元素相對定位的參考區域，簡單說，這個元素會根據 ancestor element 的位置來決定自己的位置。

absolute

當position 屬性值是 absolute，containing block就會有三種狀況，

1. 當 ancestor element 是 區塊級元素(Block-level element)，有一個非根元素 position 屬性值是 absolute，
   則 containing block 是由最接近 ancestor element 的 padding box edge 所形成，且該ancestor element必須具有除了 static 以外的 position 值（即 fixed、absolute、relative 或 sticky）。

2. 當 ancestor element 是 行內級元素(Inline-level element)，則 containing block則又會變為最接近的ancestor element 的 content edge所形成。
   舉例來說，如果是左到右書寫的語言，containing block 的 top和left 邊界是ancestor element第一個 inline box 的 content 邊界的top
   和left；而 bottom 和 right 邊界則是最後一個 inline box 的 content 邊界的 bottom 和 right。

3. 萬一往上層尋找沒有ancestor element，則該position：absolute元素的containing block是 initial containing block。

fixed

當一個非根元素 position 屬性值是 fixed，則containing block是由視口（viewport）（針對連續媒體continuous media，例如：螢幕顯示）所建立，或由頁面區域（page area）所建立（針對分頁媒體paged media，例如：印表機輸出畫面）。

參考資料

CSS 2.2 Specification- 9.1.2 containing block

CSS 2.2 Specification- 10.1 Definition of "containing block"

Layout and the containing block