开发者

Cant get hidden div on top in ie6

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;
}


In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly. To workaround this issue, Give your parent element position:relative and set it's z-index to the same number as the child element you want to set z-index on. The child element should also have position:absolute. This is how it should look.

<div style="position: relative; z-index: 10">
    <div style="position:absolute;z-index:10;">
        <img src"..." />
        ...
    </div>
</div>


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.


have you tried giving body-wrapper a lower z-index value?

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜