绝对位置是否使该元素成为包含块？答案

【问题标题】：Does position absolute make that element a containing block?绝对位置是否使该元素成为包含块？
【发布时间】：2017-01-11 18:41:10
【问题描述】：

在 css2.1 规范 w3.org 中，有一个例子解释了包含块是如何形成的。

<P id="p2">This is text 
    <EM id="em1"> 
        in the
        <STRONG id="strong1">second</STRONG> 
        paragraph.
    </EM>
</P>

当位置em为静态时，strong的包含块由p建立，但当位置em为绝对时，strong的包含块由em建立。

我浏览了有关包含块的章节，无法找到绝对位置是否会形成新的包含块。我有什么遗漏的吗？

【问题讨论】：

标签： html css css-position

【解决方案1】：

我们确定#strong1 是一个非定位的内联框。因此，从规范来看，

[...] 如果元素的位置是“相对”或“静态”，则包含块由最近的块容器祖先框的内容边缘形成。

当#em1 不是绝对定位时，它仍然是一个内联框。离#strong1最近的块容器祖先框是#p2，因此#p2是它的包含块。

当#em1绝对定位时，它会变成一个方块框，如section 9.7所示。这使它成为离#strong1最近的块容器祖先框，因此#em1成为它的包含块。一个block box是defined作为一个block级别的block container box。

那么绝对定位是否会导致元素为相对定位或非定位框建立包含块？是的，但只有当绝对定位导致元素的盒子成为这些盒子最近的块容器祖先时。

请注意，这是一个相当简化的情况，因为#em1 中的唯一框是内联框（包括围绕#strong1 的两个匿名内联）。除了并非所有块级盒子都是块容器（表格是块级盒子不是块容器盒子的常见示例）这一事实之外，即使绝对定位确实会导致元素生成块盒，因为我们在这里讨论的是内联盒，所以内联盒的块容器很可能是一个匿名块盒在绝对定位的元素中，如果该元素恰好包含块级和内联级框的混合。这个复杂的案例详见section 9.2.1.1。

但并发症并不止于此。我说“很可能”的原因是因为匿名块框是否能够建立包含块在 CSS2.1 中没有定义。

【讨论】：

【解决方案2】：

如果我正确理解您的问题，是的 em 和 absolute 定位将成为新的包含块。尝试更改此演示中的属性：

p{
    //position: absolute;
    overflow: hidden;
}

em{
    position: absolute;
    overflow: hidden;
    background: yellow;
    padding: 10px;
    top: 10px;
}

strong{
  padding: 20px;
  background: red;
}

https://jsfiddle.net/xvrjve6s/

【讨论】：