Minimal test case illustrating a second problem in CSS 2.1 CR (2007-07-19), Section 9.9 (Layered presentation) concerning the stacking level for floats

Test case

Description of the problem

The test case container is a relatively-positioned div with z-index:0, which thus forms a stacking context.

Within the container, a non-positioned in-flow block-level blue uncle div precedes a narrower floated, non-positioned red parent div which contains an oversize relatively-positioned green child with negative z-index (which necessarily overflows the parent). The green background of the child div is rendered not only below the red background of the parent div but also below the blue background of the uncle div. This is in accordance with CSS 2.1 CR, Appendix E but violates CSS 2.1 CR (2007-07-19), Section 9.9 (Layered presentation) which states:

No explanation exists in Section 9.9 as to why the child of the float should be rendered not only behind the float’s background but also behind the uncle div’s background, given that both the float and its child are supposed in Section 9.9 to lie on the same stacking layer.

Root causes

Possible resolution