CSS: Containing Block
date
Apr 29, 2024
slug
css-containing-block
status
Published
tags
CSS
Frontend
summary
type
Post
Containing block 是指元素的母容器，根據
position 屬性可拆分成以下三種情形：static / relative / sticky
最近的 block container (or BFC) 的 content box
absolute
最近的非
position: static container 的 padding boxfixed
initial containing box (viewport or page)
當 position 為 absolute 或 fixed 時，外部容器如果有 transform / will-change / filter 等屬性，也會優先被當作 containing block，詳細的規則可以參考 MDN 上的 Layout and the containing block
值得一提的是 containing block 在計算元素大小時有重要的功用，使用 percentage 來表示寬高時都是使用 containing block 來當作基準值的。