包含块(containing block)
包含块就是元素用来计算和定位的一个框。
- 根元素(很多场景下可以看成
<html>
)被称为‘初始包含块’,其尺寸等同于浏览器可视窗口的大小。 - 对于其他元素,如果该元素的
position
是relative
或者static
,则包含块由其最近的块级祖先元素content box
边界形成。 - 如果元素的
position:fixed
,则‘包含块’是初始包含块。 - 如果元素
position:absolute
,则包含块是最近的position
不为static
的祖先元素。
- 简单总结: 默认情况下包含块就是离当前元素最近的块级祖先元素。对于开启绝对定位的元素来说,包含块是离它最近的开启了定位(且
position
不为static
)的祖先元素。如果所有的祖先元素都没有开启定位,则其包含块就是初始包含块。