问题:
设置z-index很大,但是仍然被其他元素遮挡
图片:
问题描述:即使设置弹窗div的z-index特别大,也会被阴影遮挡。
原因:父级元素层级低
弹窗的父级节点(或祖辈节点)设置的z-index值小于阴影的z-index的值,所以,即使设置弹窗的z-index比阴影的z-index大,也会在阴影下面。
解决:
去掉弹窗父级节点的z-index属性,或者设置弹窗父级节点的z-index大于阴影
简单例子:
<div style="z-index: 1">
<div style="z-index: 10">son</div>
</div>
<div style="z-index: 2"></div>
例如上面的情况,第一个父级DIV的层级是1,第二个父级DIV的层级是2,第一个父级内部的子级DIV是10。由于父级的差距,所以内部子级 z-index设置很大,不会提升到第二个父级上层,就造成了 z-index 无效的假象。
解决方法:查看父元素的 z-index 并修改
除了上面的问题,还有以下z-index不生效原因:
父级元素溢出隐藏或者不显示
如果父元素设置了 overflow:hidden /display:none/ 等,那么子元素如果在父元素外部绝对定位,那么调节子元素 z-index 可能不会显示。
.father {
display: none;
opacity: 0;
overflow: hidden; (auto)
position: relative;
}
.son {
position: absolute;
top: 0;
right: 0;
z-index: 100;
}
解决方案:取消父元素的上述属性。
没有设置定位
使用 z-index 的前提是,需要设置 div 的 定位(eg: position: absolute;)如果元素是标准流,没有定位,那么设置z-index不会使当前元素在另一个元素上方。
<div style="position:'absolute'; z-index: 10"></div>
解决方法:设置当前元素和父级元素的定位
IE 浏览器不兼容
z-index 有一个属性 inherit,表示子元素继承父元素的 z-index。这个参数在 IE 浏览器上不兼容。
目前没有很好的直接解决方案,可以使用其他的 CSS 代替 z-index(float等)。