ie下弹出层被其他层遮盖的原因和解决方法
ie下弹出层被其他层遮盖的原因和解决办法
ie下弹出层被其他层遮盖的原因和解决办法
2012-09-07 14:35:53| 分类: 前端|举报|字号 订阅
以前好像说过这个问题,今天又遇到了,那就老生常谈,再说一次,说多了不伤身体,反而增加记忆。
现象:
一个设置了position:absolute;z-index:2000;的浮动层,居然被一个设置了position:relative;z-index:1;或者说根本就没有设置浮动属性和z-index的普通层遮住了,这在FF和IE8下是不会发生的,操蛋的IE7和IE6里,他偏偏就发生了,查阅了一点国外的资料,大意就是在ie67下,限定元素和浮动元素都要设置position属性和z-index属性,结合我这优秀的大脑,立马就想到了,只给absolute层设置了z-index,而没有给relative限定层设置z-index,设置后,弹出层如愿以偿的出现了。
举例:
HTML
<div class="rela">
<ul class="posi">
<li>他奶奶的</li>
</ul>
</div>
<div class="wahaha">娃哈哈哈</div>
CSS
.rela{
position:relative;
width:1000px;
height:30px;
z-index:1;/*这个不设置,下面的弹出层posi就会被wahaha给盖住*/
}
.posi
{
position:absolute;
z-index:2000;
width:200px;
height:30px;
top:35px;
left:0;
}
.wahaha{height:300px;background:#333;}
引用的资料原文
CSS: Z-Index and Internet Explorer
If you try to use Z-index with Internet Explorer (I hear this is a problem on both 6 and 7), you may have problems getting it to “listen” when Firefox seems to handle z-index just fine.
The problem is a bug in IE which does not render z-index properly all of the time. If you just use z-index: XXX and do not have a position tag, then it does not work. By adding “position: relative” or “position: absolute” tag to your CSS div tag, it magically works!
Thanks for wasting several hours of mine IE.
See here and here for others with this problem!
现象:
一个设置了position:absolute;z-index:2000;的浮动层,居然被一个设置了position:relative;z-index:1;或者说根本就没有设置浮动属性和z-index的普通层遮住了,这在FF和IE8下是不会发生的,操蛋的IE7和IE6里,他偏偏就发生了,查阅了一点国外的资料,大意就是在ie67下,限定元素和浮动元素都要设置position属性和z-index属性,结合我这优秀的大脑,立马就想到了,只给absolute层设置了z-index,而没有给relative限定层设置z-index,设置后,弹出层如愿以偿的出现了。
举例:
HTML
<div class="rela">
<ul class="posi">
<li>他奶奶的</li>
</ul>
</div>
<div class="wahaha">娃哈哈哈</div>
CSS
.rela{
position:relative;
width:1000px;
height:30px;
z-index:1;/*这个不设置,下面的弹出层posi就会被wahaha给盖住*/
}
.posi
{
position:absolute;
z-index:2000;
width:200px;
height:30px;
top:35px;
left:0;
}
.wahaha{height:300px;background:#333;}
引用的资料原文
CSS: Z-Index and Internet Explorer
If you try to use Z-index with Internet Explorer (I hear this is a problem on both 6 and 7), you may have problems getting it to “listen” when Firefox seems to handle z-index just fine.
The problem is a bug in IE which does not render z-index properly all of the time. If you just use z-index: XXX and do not have a position tag, then it does not work. By adding “position: relative” or “position: absolute” tag to your CSS div tag, it magically works!
Thanks for wasting several hours of mine IE.
See here and here for others with this problem!
出处:http://blog.163.com/zhengyong_04@126/blog/static/16428825920128723553807/