IE is ignoring Z-Index on positioned elements
- by Mike
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;
}
