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

秀秀_heo

已于 2024-11-14 21:45:44 修改

阅读量566

点赞数 6

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css javascript 前端

于 2024-11-14 21:40:32 首次发布

本文链接：https://blog.csdn.net/XiugongHao/article/details/143781237

CSS 专栏收录该内容

66 篇文章

订阅专栏

准备知识

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

父元素的 position 属性：
z-index 只对 position 属性为 relative、absolute 或 fixed 的元素有效。
其他元素的 z-index：
如果页面中有其他元素也设置了较高的 z-index，可能会覆盖你的 .app 元素。
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;
    }
  }
}