Minimal test case illustrating a 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. It and its descendants are all given the same dimensions.

Within the container, a floated, non-positioned red parent div contains relatively-positioned green child with negative z-index. The red background of the parent div is rendered on top of the green background of the child 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 behind the float’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