z-index层级在IE中无效

最新推荐文章于 2025-09-29 11:13:42 发布

原创最新推荐文章于 2025-09-29 11:13:42 发布 · 5.7k 阅读

2 ·

CC 4.0 BY-SA版权

本文探讨了CSS中z-index属性失效的两种常见情况及其解决办法。一种是在标准浏览器中的定位层级冲突，另一种则是IE浏览器特有的兼容性问题。通过调整元素的定位属性和结构布局可以有效避免这些问题。

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>