absolute 的包含块计算方式和正常流有什么不同?

  1. 内联元素也可以作为"包含块"所在的元素;
  2. "包含块"所在的元素不是父块级元素,而是最近的 position 不为 static 的祖先元素或根元素;
  3. 边界是 border-box 而不是 content-box。

补充:

  • 包含块(containing block)决定了绝对定位元素的百分比、绝对定位偏移量的参考基准。
  • 静态定位(默认)的元素其包含块是最近的块级祖先的 content-box;绝对定位元素的包含块是最近的 position: relative/absolute/fixed 祖先元素的 padding-box(border-box 边缘),没有则回退到初始包含块(与 viewport 相关)。
  • 固定定位 position: fixed 的包含块在多数情况下是 视口(viewport);但当祖先元素有 transform/perspective/filter 等属性时,会改为该祖先作为包含块(这是常见坑点)。