准备知识

一般来说，z-index 不生效的原因有：

1. 父元素的 position 属性：
   z-index 只对 position 属性为 relative、absolute 或 fixed 的元素有效。

2. 其他元素的 z-index：
   如果页面中有其他元素也设置了较高的 z-index，可能会覆盖你的 .app 元素。

3. CSS 特性：
   z-index 的效果可能受到 CSS 特性的影响，例如 transform、opacity 等。
   确保没有其他 CSS 特性干扰 z-index 的效果。

我的项目中就是由于第三点，opacity 影响了 z-index ，导致 z-index 不生效。

我的某个元素同时具有 link 和 download 选择器，代码如下：

.link {display: inline-block;margin-right: 10px;color: $bgGrayColor;font-size: $fontSize12;line-height: 14px;padding: 0 14px;// 字体变暗opacity: 0.8;  // 该 属性 导致 z-index 不生效// 去掉默认样式text-decoration: none;
}.download {//局部的相对定位使用 子绝父相position: relative;.app {display: none;position: absolute;top: 25px;left: 0;padding: 8px;box-shadow: 0 4px 8px 0 rgb(0 0 0 / 10%);z-index: 10000;  // 不生效.ecode {width: 140px;height: 140px;}.name {color: #000;margin-top: 2px;}}
}

解决方法

• 将 opacity 应用到子元素：将 opacity 应用到 .app 的子元素而不是 .app 本身，这样不会影响 .app 的堆叠上下文。
• 或者 去除 opacity

原因分析

• 当一个元素的 opacity 小于 1 时，它会创建一个新的堆叠上下文（stacking context），这可能会导致 z-index 无法按预期工作。