Stacking contexts formed by floats are non-atomic in all major Windows browsers including 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 floated left and has a blue background and a green 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 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 div has stacking context–like behaviour, as does the positioned z-index:auto child within the red 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.

Since the right-hand red floated div has stacking context–like behaviour, it should be rendered atomically; in particular, no other box should be rendered between its background and its positioned, z-index:auto child. However, in Firefox 2/Win, Firefox 3 beta 5/Win, Opera 9.27/Win, Opera 9.5 beta 1/Win, Safari 3.1/Win, IE 6, IE 7 and IE 8 beta 1 this does not happen; the green border of the left-hand floated div is rendered between the background of the right-floated div and its red-background positioned, z-index:auto child.

An update to CSS 2.1 Candidate Recommendation Section 9.9 (Layered presentation) validating this currently non-conformant behaviour has been approved.

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.