z-index失效的原因和解决

z-index失效

z-index 属性是用来调整元素及子元素在 z 轴上的顺序，当元素发生覆盖的时候，哪个元素在上面，哪个元素在下面。通常来说，z-index 值较大的元素会覆盖较低的元素。

问题的出现：
今天遇到一个问题， z-index无论多大都没作用，失效了。
预期的效果：

（1）标签说明：

1、可能原因一：

（1）分析

经过页面检查，发现虽然css代码没有被划除：

但是自身实际上是没有效果的：

实验

给a标签加个一个红色边框以后，发现层级根本没有被提高：

图中的灰色框整体相对于装有a 标签的 li 标签进行定位，a自身没有定位；
由图可见，a标签的红色边框实际是被覆盖住的，即z-index失效，原因如下：
灰色框整体是绝对定位元素，会脱离文档流，层级提高，标签会显示在最前面，加上红色的没有进行定位，层级不会被提升，所以灰色盖住了红色的，
又因为a标签自身没有进行定位，所以z-index对它无效。

（2）解决

给a标签添加定位： position：relative；

li.mine > a {
  position: relative;
  z-index: 1;
  height: 30px;
}

2、 可能原因二：

就上面的问题而言：
如果给a标签添加了定位；
但是效果上还是不理想，需要考虑是否是结构上的问题

（1）分析

两个元素都进行了定位但是还是出现如下现象：

在结构上：红色框在前，灰色框在后，
两个元素之间，结构上靠后的覆盖靠前的，子元素覆盖父元素；
在这：属于结构上靠后的覆盖靠前的；

（2）解决

在有定位的情况下，该元素的z-index没有生效，是因为该元素的后面元素后来居上，盖住了该元素，解决方式：将盖住该元素的后面元素的z-index设置为负数，而该元素不设z-index属性.
该方法对“子元素覆盖父元素”的情况同样有效；

本文地址：https://blog.csdn.net/TTianYe/article/details/111145010