• Home
• About us

z-index in Internet Explorer 7

The z-index implementation in IE 7 can be troublesome when combined with elements that are relatively positioned. My problem occurred on my personal web site on which I have CSS drop down menus that I want to appear over an element with the position:relative declaration. The drop down menu would appear behind the relatively positioned element despite the z-index being set correctly for the drop down menu styles. The page displayed correctly in Firefox. I found a great post at http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html that identified the solution.

The solution involves setting the z-index property for any parent elements of the drop down menu in addition to setting it for the drop-down element itself. For example, suppose the navigation menu is in the nav element. The z-index property must be also set for the pageheader element.

<div id=”pageheader”>
<div id=”nav”>
</div>
</div>

Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.