绝对位置是否使该元素成为一个包含区块？ [英] Does position absolute make that element a containing block?

问题描述

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

 < P id =p2>这是文本
< EM id =em1> 
中的
< STRONG id =strong1>秒< / STRONG> 
段落。 
< / EM> 
< / P> 
  

将 em 定位为静态时， strong 的包含块由 p 建立，但是当位置 em 作为绝对值， strong 的包含区块由 em 建立。

我浏览关于包含块的章节，并且无法找到绝对位置是否会形成新的包含块。我们建立了＃strong1 是一个非定位内联框。因此，从规范来看，如果元素的位置是'相对'或'相对'，那么

[em]

当 '时，包含块由最近的块容器祖先盒的内容边缘形成。

＃em1 没有被绝对定位，它仍然是一个内联框。对于＃strong1 最近的块容器祖先盒是＃p2 ，因此＃p2 是它的包含块。

当绝对定位＃em1 时，它会变成块如第9.7节所示，一>。这使得它成为最近的块容器祖先盒，因此＃strong1 ，因此＃em1 成为它的包含块。块盒已定义为块级容器块。

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

---

请注意，这是一个相当简单的情况，因为＃em1 中的唯一框是内联框（包括围绕＃strong1 ）。除了并非所有块级容器都是块容器（表格是块级容器的常见示例，它不是块容器盒），即使绝对定位操作也会导致生成元素一个块框，因为我们在这里讨论一个内联框，很可能是内联框的块容器是绝对定位元素内的一个匿名块框，如果该元素碰巧包含混合了块级和内联级的框。这个复杂的案例详见第9.2节.1.1 。

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

In css2.1 spec, w3.org, there is a example explain the way how containing blocks are formed.

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

when position em as static, strong's containing block is established by p, but when position em as absolute, strong's containing block is established by em.

I look through the chapter about containing block and can't find whether absolute position will form a new containing block or not. Is there something that im missing?

解决方案

We establish that #strong1 is a non-positioned inline box. Therefore, from the spec,

[...] if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block container ancestor box.

When #em1 is not absolutely positioned, it remains an inline box. The nearest block container ancestor box to #strong1 is #p2, therefore #p2 is its containing block.

When #em1 is absolutely positioned, it turns into a block box as shown in section 9.7. This makes it the nearest block container ancestor box to #strong1, therefore #em1 becomes its containing block. A block box is defined as a block-level block container box.

So does absolute positioning cause an element to establish a containing block for relatively positioned or non-positioned boxes? Yes, but only when absolute positioning results in the element's box becoming the nearest block container ancestor of those boxes.

---

Note that this is a rather simplified case, since the only boxes in #em1 are inline boxes (including the two anonymous inlines surrounding #strong1). Besides the fact that not all block-level boxes are block containers (tables being a common example of a block-level box that's not a block container box), even if absolute positioning does result in an element generating a block box, since we're talking about an inline box here, it may very well be that the inline box's block container is an anonymous block box within the absolutely positioned element, if that element happens to contain a mix of both block-level and inline-level boxes. This complicated case is detailed in section 9.2.1.1.

But the complications don't stop there. The reason I say "it may very well be" is because whether or not an anonymous block box is capable of establishing a containing block isn't defined in CSS2.1.

这篇关于绝对位置是否使该元素成为一个包含区块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！