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