CSS中absolute的containing block计算方式与正常流有何差异?

3 min read

在普通流中,绝对定位元素的 containing block(容器块)一般是包含该元素的最近的非跨越(non-overlapping)祖先块框(block container)。

而在绝对定位布局中,绝对定位元素的 containing block(容器块)会根据其 position 属性的不同值来计算。

具体来说,当绝对定位元素的 position 属性值为 absolute 时,其 containing block 的计算方式与普通流相同,即绝对定位元素的 containing block 是包含该元素的最近的非跨越祖先块框。

但当 position 属性值为 fixed 时,它的 containing block 是 viewport。而当 position 属性值为 relative 时,它的 containing block 是该元素自身。

另外,当绝对定位元素的 containing block 是其自身时,该元素的 position 属性值也会影响布局。具体来说,当元素的 position 属性为 relative 时,其定位相对于其正常位置发生偏移;当属性为 static 时,其定位不发生偏移,仍然在正常位置上。