Skip to content

包含块(containing block)

包含块就是元素用来计算和定位的一个框。

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