Question

I am using JQuery to show/hide a div. It works fine in most browsers except IE6. When I show the div, it ends up hidden behind the other divs instead of on top of them.

You can see what I mean here: http://www.urlgone.com/d055c5/ (http://old.solesurvivorleather.com/static_product.html).

If you mouse-over email list on the top right menu you will see the hidden div ‘listform t’ slides down and shows on top, but in IE6 it slides down behind the body-wrapper div.

Here is the CSS Code for both divs:

#listform {
    background-color:#F4F4EF;
    border:1px solid #8F8A7E;
    display:none;
    margin:0;
    max-width:150px;
    padding:10px;
    position:absolute;
    right:0;
    text-align:left;
    top:30px;
    width:150px;
    z-index:999;
}
#body-wrapper, #utility-wrapper {
    margin:0 auto;
    position:relative;
    width:950px;
}
#body-wrapper {
    background-color:#FFFFFF;
    border:0 solid black;
    position:absolute;
}

Answer 1

IE doesn’t pay attention to z-index in an intuitive way when it comes to positioned elements. If you move your #listform element to the end of the code (just before </body>) IE should render things properly.

Alternatively, you can place your #listform element inside the end of your #body-wrapper (just before the </div>.) This will place the element higher in the stack than all the items it needs to overlap. Since the width of the #body-wrapper is fixed, it should provide a stable offset calculation regardless of user window size.