IE z-index bug with CSS dropdown menu
January 15, 2009
css / design / web standards
Standards-aware web designers generally know of the z-index bug in all versions of Internet Explorer (though, version 8 is rumored to fix it).
In the W3C’s specs, z-index is designed to affect the stacking order of positioned elements on a web page. So, an element with a z-index of 2 should always appear above an element with a z-index of 1.
In Internet Explorer, this doesn’t work like it should. Internet Explorer resets the stack when the positioned elements are separated from each other.
So let’s say we have the following HTML. Fairly standard header, navigation, etc.
[prism key=”html” language=”markup”]
Then, we have the following CSS.
[prism key=”css-bug” language=”css”]
When the code below the navigation, in this case the absolutely positioned h1, is any positioned element (or a select element, Flash movie, etc.), all versions of Internet Explorer prior to version 8 will cause the dropdown menus to fall behind the content.
The fix for this is very simple, but there are incredibly large websites that use jumbled masses of iframes, extra divs, and other horrors to get Internet Explorer to display the dropdowns above the offending elements.
For a fix, we use the following CSS for the header div. See the screenshot for an example of this (again, in IE7). Click it to see a larger version.
[prism key=”css-fix-1″ language=”css”]
Now, you will also need to make sure that your container div, whatever it is called, is styled correctly. In my example:
[prism key=”css-fix-2″ language=”css”]
This ensures that the
header and the
container, whatever you call them, understand their relationship to each other for the z-index fix to work.
This fix causes the dropdowns to appear above everything that is inside the content areas of the page. It works in IE7 and IE6. My example adds some code to show the
statement, which is another common offender.