Minimal test case illustrating a problem in CSS 2.1 CR (2007-07-19), Section 9.9 (Layered presentation) concerning the stack level of non-positioned elements

Test case

in-flow inline-level element

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, an in-flow inline-level red span precedes a green div which is floated left with a negative right margin, pulling the span’s line boxes across to its left-hand edge. The content and red background of the span is rendered on top of the green background of the float. This behaviour (which is in accordance with CSS 2.1 CR, Appendix E) demonstrates a contradiction within CSS 2.1 CR (2007-07-19), Section 9.9 (Layered presentation) which states:

According to Section 9.9, both the red span and the green float have z-index:auto and hence both have the same integer stack level as the parent stacking context, and are thus stacked in document tree order (float on top of span); yet they should also be rendered within their parent stacking context according to their assigned stacking levels (span on top of float).

Root causes

Possible resolution