【CSS】opacity 影响 z-index 不生效

准备知识

一般来说,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 选择器,代码如下:

css 复制代码
.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 无法按预期工作。
相关推荐
拉不动的猪几秒前
如何处理管理系统中(Vue PC + uni-app 移动端):业务逻辑复用基本方案
前端·javascript·架构
边洛洛5 分钟前
next.js项目部署流程
开发语言·前端·javascript
Zsnoin能5 分钟前
浏览器连接 新北洋BTP-P33/P32蓝牙打印机,打印 二维码
前端
非凡ghost12 分钟前
Syncovery Premium(文件同步软件)
前端·javascript·后端
trsoliu16 分钟前
2025前端AI Coding产品与实战案例大盘点
前端·ai编程
云中雾丽25 分钟前
react-checkbox的封装
前端
乐园游梦记27 分钟前
告别Ctrl+F5!解决VUE生产环境缓存更新的终极方案
前端
岁月宁静29 分钟前
用 Node.js 封装豆包语音识别AI模型接口:双向实时流式传输音频和文本
前端·人工智能·node.js
猪猪拆迁队33 分钟前
前端图形架构设计:AI生成设计稿落地实践
前端·后端·ai编程
神膘护体小月半33 分钟前
bug 记录 - 路由守卫 beforeRouteLeave 与 confirm 结合,不生效问题
javascript·vue