How can I get the desired z-index behavior from IE when using nested DIVs?
I have three DIVs, something like this:
<div id="header">
...
</div>
<div id="content">
<div id="popup">
...
</div>
</div>
The DIV # header is "position: fixed" and is used as a non-scrollable header at the top of the screen. Content DIV # contains some content and is "position: relative". DIV # popup is "position: absolute" and starts hiding and showing on hover.
I want the popup to be at the highest level on the page, so that it is above even the DIV # header if they overlap. This works fine in Firefox, but in IE the popups are behind the title. I can fix this by setting the z-index of the DIV # content above the header, but then of course the content of the DIV # will also show above the DIV # header when they overlap, which is not what I want.
It looks like I might be influenced by what is described on this page . However, as I understand it, something like setting a default z-index for all elements, e.g .:
* {
z-index: 1
}
should fix this (since now every element will have a z-index of 1 explicitly set), however, instead of fixing that in IE, it breaks it in Firefox (for example Firefox now behaves like IE).
What's the real deal with z-indexes in IE?
source to share
There is a bug in IE that I think has been fixed with IE8 where the z-index stack is reset for every relative position context that exists on the page. The z-index value in different relative positioned containers is independent.
You are describing a bug that is probably related. Try replacing position with position by placing the popup at the mouse click position.
Another link: http://therealcrisp.xs4all.nl/ie7beta/css_zindex.html
source to share