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!

出处:http://blog.163.com/zhengyong_04@126/blog/static/16428825920128723553807/