W3C home > Mailing lists > Public > www-style@w3.org > July 2009

Stacking order question

From: Ben Cotterell <ben.cotterell@antplc.com>
Date: Thu, 16 Jul 2009 14:16:32 +0100
To: <www-style@w3.org>
Message-ID: <03991292716842d1d53a59b5672b13873c7ba271@localhost>
See this test case:


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

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
    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

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

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:27 UTC