Relatively positioned z-index:auto floats are painted on a lower stacking level (painting layer) than relatively positioned z-index:auto non-floated elements in IE 8 beta 1

Minimal test case

This is the first div.

This is a child of the first div.

This is the second div.

In this minimal test case the left-hand div is positioned with z-index:auto, floated left and has a yellow background and a green border-right, and has a negative right margin. This allows the right-hand div, which is positioned with z-index:auto, floated right in its fixed-width holder div parent, has a red background and is earlier in the source, to sit alongside the content edge of the left-hand one.

The positioned z-index:auto holder div and each floated, positioned z-index:auto div has stacking context–like behaviour, as does the positioned z-index:auto child within the right-hand div. However, no positioned elements have an integer z-index specified and so no actual stacking contexts exist other than that formed by the document root.

An update to CSS 2.1 Candidate Recommendation Section 9.9 (Layered presentation) has been approved, stating that floats (as well as inline blocks, inline tables, and positioned elements whose value of z-index is ‘auto’) should be treated as if they form stacking contexts except in that each positioned descendant and descendant which actually creates a new stacking context should be considered part of the parent stacking context. IE 8 beta 1 supports this behaviour.

Since the three relatively positioned elements all have z-index:auto, they should be painted in document order. However, in IE 8 beta 1 the positioned child of the earlier red div is rendered on top of the later div.

Note however that relatively positioned, z-index:auto non-floated elements are correctly painted in document order in IE 8 beta 1, conforming to the CSS 2.1 Candidate Recommendation.

View other implementation bugs related to z-index and stacking contexts.

For a discussion of the ambiguities and errors currently present in the CSS 2.1 Candidate Recommendation as regards z-index and painting order, see CSS 2.1 Candidate Recommendation : z-axis layering behaviour, stacking contexts and the z-index property.