z-index 无效解决方法

在工作中遇到这样一个问题：设置一个DIV z-index 很大，但是仍然被其他元素遮挡

例如：左侧的若干图标 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;
}

解决方案：取消父元素的上述属性。

2022-07-08 补充：如果父元素的 overflow:hidden 不能取消，例如父元素是一个对话框，滚动部分溢出不显示，但是需求是子元素的 select 下拉菜单需要溢出显示。另一种方法是，直接把子元素和父元素分离，就是把子元素渲染到页面上另一个根节点上（modal-Protal）然后通过 props 把相关的样式传给子组件，这样父元素就算是 dialog 也可以实现子组件溢出父元素。

如果子元素触及屏幕边缘，需要处理一下 Y 轴的位置。

父级元素层级低

<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 的前提是，需要设置 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等）。

Note

如果项目中层级很复杂（界面 1, modal 100, dialog 1000, mask 500），为了避免层级混乱，最好把 z-index 维护在一个公共的组件内部（一个单独的CSS文件或者单独的JS文件中，使用行内样式），这样修改和后期维护比较方便。