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