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>