【Day 10】延伸討論 - containing block - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2025 iThome 鐵人賽

DAY 10

Modern Web

欸，貓咪你不能去那裡！CSS新手學習之路系列第 10 篇

【Day 10】延伸討論 - containing block

17th鐵人賽

jeankuo1510

團隊好想工作室 v 9.0

2025-09-24 19:23:05

22 瀏覽

分享至

前言

昨天介紹了基本的五種position屬性值，
裡面屢屢提到一些陌生的名詞，什麼是containing block？
今日就來介紹它吧！

容器區塊 containing block

這是 CSS 2.2所提出在排版中一個非常核心的原則，關係到盒模型（box model）中元素是如何定位與排列的。

CSS 2.2 規範

9.1.2 Containing blocks
In CSS 2.2, many box positions and sizes are calculated with respect to the edges of a rectangular box called a containing block.
In general, generated boxes act as containing blocks for descendant boxes; we say that a box "establishes" the containing block for its descendants.
The phrase "a box's containing block" means "the containing block in which the box lives," not the one it generates.
Each box is given a position with respect to its containing block, but it is not confined by this containing block; it may overflow.

翻譯如下：
擷自CSS 2.2 規範 9.1.2，此節介紹Containing blocks。

許多box的位置與尺寸是相對於一個稱為「containing block」的矩形box的邊緣來計算的。
一般來說，所產生的box會作為其後代盒子(descendant box)的「containing block」；我們稱這樣的盒子是給自己後代盒子“建立”containing box。
所謂「一個盒子的containing block」，意思是「該盒子所處的containing block」，而不是它所產生的containing block。
每個box的位置是相對於它的containing block來決定的，但它不是被侷限在containing block內；它可能會溢出（overflow）。

解說

上述規範我可以得知containing block其性質，

box的位置和大小受到containing block的影響，是相對於其containing block來計算的而得。
當在 HTML 裡建立一個元素，它的box會成為裡面子元素的containing block。也可以說，子元素的位置是參照（或是相對）父元素的這個 box 來決定的。
延伸來說，當一個元素往上尋找沒有找到可以參照對比的父元素時，也就是root元素就會參照整個頁面(HTML裡的html)，
在正常流向情況下，root元素是body元素(<body>)的containing block，也被稱為 initial containing block。（CSS 2.2 - 10.1）另外，body元素也是它所有子元素的containing block。
box的containing block是指它“所處”的containing block；另一個角度來說，此box“產生”（或者說“建立”）的containing block是它子代的containing block。
即使位置是依據參照containing block計算而來，但實際呈現時，若元素超出此containing block的邊界（例如：使用 position: absolute），這種情況稱為溢出（overflow）。