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

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:

• The z-index property applies to positioned elements
• The computed value of the z-index property is ‘as specified’ and so, since this property does not apply to non-positioned elements, the computed value of such elements resolves to the initial value of the property, which is ‘auto’.
• Each box in a given stacking context has an integer stack level, which is its position on the z-axis relative to other boxes in the same stacking context.
• The stack level of the generated box of an element with z-index:auto in the current stacking context is the same as its parent's box
• Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order.
• Each stacking context consists of seven stacking levels (from back to front); the one for in-flow non-inline-level descendants comes before the one for floats.

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

• The definition of stack level is faulty, resulting in a contradiction. (2.8.)

Possible resolution

• Define positioned boxes whose value of z-index is ‘auto’ to have stack level 0. Then to non-positioned non-floated boxes, floats, and inline boxes assign stack level i, j, k respectively where -1 < i < j < k < 0.
• Remove the word “integer” from the phrase “Each box in a given stacking context has an integer stack level”.