Stacking contexts formed by inline-blocks are non-atomic in all major Windows browsers supporting this display value 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 has display:inline-block and has a blue background and a negative right margin. This allows the right-hand div, which is display:inline-block with a green background and is later in the source, to overlap the left-hand one.

The positioned z-index:auto holder div and each inline-block has stacking context–like behaviour, as does the positioned z-index:auto child within the left-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 left-hand blue inline-block 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. In Firefox 3 beta 5/Win, Opera 9.27/Win (buggy), Opera 9.5 beta 1/Win, Safari 3.1/Win and IE 8 beta 1 this does not happen; the background of the right-hand green inline-block is rendered between the blue background of the left-hand inline-block and its red-background positioned, z-index:auto child.

See also an equivalent test case in which the inline-blocks are elements which are ‘inline-level’ as defined by the HTML 4.01 specification and are thus handled in a peculiar way by Internet Explorer 6 and 7.

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.