Floats are painted in document order even when some are relatively positioned with z-index:auto in IE 8 beta 1

Minimal test case

This is the first div.

This is the second div.

In this minimal test case the left-hand div is floated left and has a yellow background and a red border-right, and has a negative right margin. This allows the sibling right-hand div, which is floated right in its fixed-width holder div parent and has a green 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 div has stacking context–like behaviour. 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.

The right-hand green div has position:relative while the left-hand red-bordered div has position:static. Hence, even though it comes earlier in the source code, the green right-hand div should appear on top of the red border of the left-hand one. However, in IE 8 beta 1 this does not happen; the right-hand div is rendered behind the left-hand div’s red border.

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.