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?
精彩评论