Posted by Ben C on 02/21/07 21:37

On 2007-02-20, Susanne West <swest@gmx.de> wrote:
>
>
> hi.
>
> i have this case, where (for about 2 days now) i'm trying to
> get z-index to work correctly and i can't figure out what's wrong.
>
> IE seems to completely ignore it, while firefox does it
> properly... it's basically just a series of pulldowns done
> with div's...

I don't have IE but I had a look at it anyway because I thought it's
quite likely you don't need z-index at all, and without it maybe you
could avoid the problem.

Without z-index the page works as you want in Opera, but not in Firefox.

I think Opera is correct on this one. A bit of experimentation revealed
that the thing that's confusing Firefox is that the boxes after the one
that you toggle on and off are also in the relatively positioned box.

To recap, you have this:

<rel pos box>
<abs pos box, display: none></abs pos box>
<another box>...</another box>
</rel pos box>

When you switch the abs pos box to display:block, the inline boxes in
<another box> get drawn on top of it (although <another box>'s
background is behind it). There is no justification for this if I
understand the CSS 2.1 spec correctly.

But this works:

<rel pos box>
<abs pos box, display: none></abs pos box>
</rel pos box>
<another box>...</another box>

Positioning is the same, but FF gets the stacking right and you don't
need to use z-index. You will have to try it in IE, where all bets are
off but you never know.

I have uploaded the modified page, without z-index and closing the rel
pos boxes earlier, since people prefer urls. I also gave it a strict
doctype (very important, not using the strict doctype leads to
insanity).

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

[Back to original message]