How can I get desired z-index behavior from IE when using nested DIVs?

Question

I have three DIVs, something like this:

<div id="header">
    ...
</div>
<div id="content">
    <div id="popup">
        ...
    </div>
</div>

DIV#header is "position: fixed" and used as a non-scrolling header at the top of the screen. DIV#content has some content in it and is "position: relative". DIV#popup is "position: absolute" and starts out hidden and is displayed on hover.

I want the popup to be at the highest level on the page, so that it is above even DIV#header if they overlap. This works fine in Firefox but in IE the popups are behind the header. I can fix this by setting the z-index of DIV#content to be higher than the header, but then of course DIV#content will also be displayed above DIV#header when they overlap, which I don't want.

It sounds like I might be affected by what is described on this page. However, as I understand it, doing something like setting a default z-index on all elements, like so:

* {
    z-index: 1
}

should fix this (as now every element would have a z-index of 1 explicitly set), however rather than fixing this in IE it breaks it in Firefox (such that Firefox now behaves like IE).

What's the real deal with z-indexes in IE?

Answer 1

There's a bug in IEs, which I think is being fixed with IE8, where the z-index stack is reset for each position relative context, which exists in the page. Meaning z-index within different relative positioned containers are independent.

The error you describe is probably related. Try to replace the position relative by positioning the popup on mouse click position.

Another link: http://therealcrisp.xs4all.nl/ie7beta/css_zindex.html

Answer 2

If DIV#popup should always appear on top of all other elements, why not just promote it to the top level in DOM?

<div id="header">
    ...
</div>
<div id="content">
    ...
</div>
<div id="popup">
    ...
</div>