z-index层级在IE中无效

来源：互联网发布：java list移除元素编辑：程序博客网时间：2024/05/17 15:20

z-index无效的两种可能情况：

第一种情况（z-index无论设置多高都没用）：

1、父级标签position的属性值没有设置为relative；

2、问题标签中没有写position属性值（不包括static）；

3、问题标签有浮动属性。

第二种情况（ie兼容问题）：

<style>*{margin:0;padding:0;}.contain{width:300px;height:300px;margin:50px;color:#fff;background:#609;position:relative;}.box1{width:100px;height:100px;background:#FC0;position:absolute;top:50px;left:50px;z-index:20;}.box2{width:100%;height:100%;background:#ccc;opacity:0.6;filter:Alpha(opacity=60);position:absolute;top:0;left:0;z-index:10;}</style><body><div class="contain">父级（第一层）     <div class="box1">顶层弹出（第三层）</div></div><div class="box2">透明覆盖（第二层）</div>

正常情况应该是这样：

但是在ie下会出现这种情况：

这是因为在ie浏览器中，他把最外层的z-index限制了，不管你内部的z-index多高，都超不过外部的，所以这个时候只能将要置顶的弹出框单独分离出来

<style>*{margin:0;padding:0;}.contain{width:300px;height:300px;margin:50px;color:#fff;background:#609;position:relative;}.box1{width:100px;height:100px;background:#FC0;position:absolute;top:100px;left:100px;z-index:20;}.box2{width:100%;height:100%;background:#ccc;opacity:0.6;filter:Alpha(opacity=60);position:absolute;top:0;left:0;z-index:10;}</style><body><div class="contain">父级（第一层）  </div><div class="box1">顶层弹出（第三层）</div><div class="box2">透明覆盖（第二层）</div>

0 0