Question

在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建立的。

我查看有关包含块的章节，并且无法确定绝对位置是否会形成新的包含块。有什么东西我不见了吗？

Answer 1

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

[...] 如果元素的位置是相对的＆＃39;或者＆＃39;静态＆＃39;，包含块由最近的块容器祖先盒的内容边缘组成。

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

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

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

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

但并发症并没有止步于此。我说的原因＆＃34;它很可能是＆＃34;是因为CSS2.1中没有定义匿名块框是否能够建立包含块。

Answer 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/

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

2 个答案: