Floats are painted in document order even when some are relatively positioned with negative z-index 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 relatively positioned with z-index:-1, 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 left-hand yellow/red floated div is relatively positioned with z-index:-1 while the right-hand green floated div is not positioned. 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 green 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.