ie z-index not appearing behind element

Question

I am trying to find a workaround for the infamous IE z-index bug. I have read various articles from Google but still find that my drop-down menu appears behind a accordion panel. I have posted my code and would be grateful if someone could help me understand where I am going wrong. I have tried versions up to and including ie9. Thanks

css code

#menu {
    list-style:none;
    width:97%;
    margin:20px auto 0px auto;
    height:43px;
    padding:0px 20px 0px 20px;
    color: black;
}

#menu li {
    float:left;
    display:block;
    text-align:center;
    position:relative;
    padding: 4px 10px 4px 10px;
    margin-right:30px;
    margin-top:7px;
    border:none;
    z-index:1000;
}

Could you add the html as well or add a jsfiddle of the menu? — Marco Geertsma, Jun 12 '13 at 11:09
Also a possible duplicate : http://stackoverflow.com/questions/1287439/ie7-z-index-layering-issues — Marco Geertsma, Jun 12 '13 at 11:18
This can't be answered until you post some html so we can see your structure — Pete, Jun 12 '13 at 11:26

Alex Gill · Accepted Answer · 2013-06-12T11:26:42.223

You need to get back to basics with IE and positioning.

The main thing to consider is where the major elements are in DOM i.e. the document structure.

For starters you will want give #menu a 'relative' position and z-index.

You will also need to determine what rules have been set for the accordion.

Setting some elements z-index to '1000' and hoping for the best wont cut it with IE.

Work with your documents structure, treat you page container/wrapper as 'z-index: 0', set this while you test if need be.

Then go through the various elements, header, nav, etc and check their positioning, z-index, etc and increment the layers.

<div id="container">          <<<<< 0
<header>                      <<<<< 1
<div id="accordion"></div>    <<<<< 2
<nav id="menu></nav>          <<<<< 3
</header>
</div>

ie z-index not appearing behind element

1 Answers1