css中z-index无效解决方法

问题：

设置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等）。