Does position absolute make that element a containing block?

Question

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?

Spelldown

Answer 1

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.

Fragmentary

Answer 2

If I understand your question correctly, yes em with absolute positioning will become the new containing block. Try changing the properties in this demo:

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/

Armenta