IE is ignoring Z-Index on positioned elements

Question

IE yet again is proving to be the bane of my existence. The top of a site I'm working on has a horizontal menu, an item of which triggers a pure-CSS menu that is positioned absolute within the parent menu DIV (positioned relative). This places the menu perfectly in both IE and the W3C compliant browsers.

The problem arises when I have more positioned elements further down on the page. These are also positioned relative, because there is data inside them that needs to be positioned absolute... again, this displays properly in all browsers I've tested it on.

The problem is, that then the top menu is opened, part is obscured by the positioned elements further down the page - in effect, it's positioned BELOW these elements even though there are z-index properties defined on all. (in both the CSS file and inline).

The only way to get IE to display this properly is to place the actual HTML for the menu at the bottom of the page, below (in DOM terms) the positioned elements elsewhere on the page. I would only do this as an absolute last resort.

All Elements are the same type (div). Here is the relevant HTML:

<div id='menu'>
<div id='cat_menu' style='display:none;z-index:10000;'>
<table cellspacing='0' cellpadding='0' class='brmenu' width='100%'>
    [data]
</table>
</div>

<div class='product_new' style='z-index:20;'>[data]</div>
<div class='product_listing' style='background-color:#FFFFFF;'>[data]</div>

And the relevant CSS:

div#menu {
height: 26px;
padding: 0;
position: relative;
}

div#cat_menu {
position: absolute;
top: 25px;
left: 115px;
width: 300px;
z-index: 1000;
}

 div.product_new {
background-image: url("/images/sp_images.png");
background-position: 0 -108px;
background-repeat: no-repeat;
padding 0px;
height: 40px;
font-size: 9pt;
margin-top: 5px; 
position: relative;
z-index: 20;
}

Answer 1

Try: http://css-tricks.com/snippets/jquery/fixing-ie-z-index/

Answer 2

The solution above for jQuery seems to work with Prototype as well... I've included the PrototypeJS code below:

var zIndexNumber = 1000;
$$("div").each(function(e) {
    e.setStyle({ zIndex: zIndexNumber });
    zIndexNumber -= 10;
});

Answer 3

A couple of notes:

• suckerfish dropdowns are proven to work well. Why reinvent the wheel?
• IE only reliably renders z-indexes for sibling elements. Due to this, it's best to only "z-index" elements that are direct children of the BODY tag.
• If you don't want to change your markup, you will likely need to set a z-index on the #menu element above "20". The problem is that setting a z-index takes the element out of the flow (which is undesirable).
• the style="..." attribute makes css incredibly specific (requiring you to use "!important" in your stylesheet. Please don't forget to migrate those style attributes)
• "position: relative" triggers "hasLayout" for IE

Answer 4

David, "position: relative" doesn't trigger hasLayout for IE. It can be triggered by explicitly setting the dimensions of the element (width or height) or using zoom: 1.

But you're right if you've mentioned "position: relative" as a one of a couple bug-fixing solutions for IE.