Stacking order question

See this test case:

    http://www.tidraso.co.uk/misc/stacking.html

As far as I can tell from CSS 2.1, the pink box should be behind the red
one.

CSS 2.1 9.9.1 defines 7 stacking levels:

 Each stacking context consists of the following stacking levels (from
 back to front):

    1. the background and borders of the element forming the stacking
       context.
    2. the stacking contexts of descendants with negative stack levels.
    3. a stacking level containing in-flow non-inline-level descendants.
    4. a stacking level for floats and their contents.
    5. a stacking level for in-flow inline-level descendants.
    6. a stacking level for positioned descendants with 'z-index: auto',
       and any descendant stacking contexts with 'z-index: 0'.
    7. the stacking contexts of descendants with positive stack levels.

The red box is at level 6 because it is positioned, so goes above the
blue one.

The yellow box is a float, so at level 4, behind the red one. So far so
good.

Inside the float is the pink box, relatively-positioned. So it is at
level 6. But the float appears to it to start a stacking context. So it
cannot be stacked above the float.

See Appendix E:

    All non-positioned floating descendants, in tree order. For each one
    of these, treat the element as if it created a new stacking context,
    but any descendants which actually create a new stacking context
    should be considered part of the parent stacking context, not this
    new one.

So, if I set z-index: 0 on the pink box, it should come in front of the
red box, because now it does "actually create a new stacking context"
and should therefore participate in the root stacking context.

But if I leave it at z-index: auto, it should remain behind the red box,
because we are treating the float as if it created a stacking context.

But, Firefox, Opera and Konqueror all put the pink box in front of the
red one-- i.e. as though it participated in the root stacking context,
_even when_ it has z-index: auto (which is what it does have in the test
case above).

Usually when all three of those browsers agree, it means I've
interpreted the specs wrong... but I can't see where in this case.

Can anyone explain why the pink box should be in front of the red one?

-- 
Ben Cotterell
ANT Software Limited

Received on Thursday, 16 July 2009 13:14:49 UTC