Re: [CSS21] Layered presentation, z-index hard to comprehend

>>Thanks, I read Paolo Lombardi's tutorial but unfortunately it didn't touch 
>>on the subject of negative stack levels and the contradiction in the 
>>specs. Firefox (1.5.0.7, 2.0 RC1)
>
>I suggest testing a nightly build based on Gecko 1.9.  A lot of the z-index 
>bugs that Gecko 1.8 (Firefox 1.5 and 2) had got fixed in the year since 1.8 
>shipped.
>
>-Boris

I tested a Firefox nightly and indeed, it behaves like other browsers now. 
My conclusions follow.

This is true:
"Boxes with greater stack levels are always formatted in front of boxes with 
lower stack levels."

But this is false:
"The box also establishes a local stacking context in which its stack level 
is '0'."

Although the box is involved in its own stacking context, it does not have a 
stack level like its descendants may have. Instead, the borders, background 
and contents are stacked according to the complex rules laid out in Appendix 
E, dispersed among descendants with different, specified stack levels. I had 
a feeling it would have been too much to ask to have an intuitive and 
logical stacking system. ;-)

There are probably good reasons for this order - I hope it wasn't created 
because of IE's quirky behaviour - but one consequence is that placing a 
child element behind its parent is impossible. A workaround is to create a 
holding element that establishes the context and then place the two elements 
inside as siblings. The holder div can be shrink-wrapped around one child 
and the size and position of the other can be derived from the holder.

Many thanks,
Roger Olsson

_________________________________________________________________
Share your special moments by uploading 500 photos per month to Windows Live 
Spaces  
http://clk.atdmt.com/MSN/go/msnnkwsp0070000001msn/direct/01/?href=http://www.get.live.com/spaces/features

Received on Thursday, 5 October 2006 15:33:51 UTC