子元素应用Grayscale滤镜导致父元素绝对定位::before元素失效

这个问题我之前踩过一模一样的坑！核心原因是CSS滤镜会强制触发元素的堆叠上下文——当你给链接内的块元素添加filter属性后，这个元素会创建独立的堆叠上下文，而你的::before伪元素默认是挂载在父容器/链接标签上的，没有自己的堆叠上下文加持，层级就被内部带滤镜的元素反超了，导致遮罩被压在下面。

两种靠谱的解决方案 #

方案1：给伪元素的父容器添加空滤镜（最稳妥） #

给包裹链接的容器（也就是你说的“菜单项容器”）添加一个无视觉影响的滤镜，触发它的堆叠上下文，这样伪元素作为它的子元素，层级就能自然覆盖内部带滤镜的内容：

<!-- 示例结构 -->
<div class="menu-container">
  <a href="#" class="disabled-link">
    <div class="icon" style="filter: grayscale(100%);">📷</div>
    <span>禁用的菜单项</span>
  </a>
</div>

.menu-container {
  position: relative;
  /* 添加空滤镜，触发堆叠上下文 */
  filter: opacity(1);
}

.disabled-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: auto; /* 阻止点击穿透 */
  z-index: 1; /* 保险起见明确层级 */
}

.disabled-link {
  pointer-events: none; /* 原本的禁用逻辑 */
  color: #999;
}

方案2：调整堆叠层级（需注意布局影响） #

如果不想给父容器加滤镜，也可以通过z-index配合定位来调整层级，但要注意：带滤镜的元素已经有自己的堆叠上下文，所以需要给伪元素的直接父级（比如链接标签）设置position: relative; z-index: 1;，同时给内部带滤镜的块元素设置position: relative; z-index: -1;：

.disabled-link {
  position: relative;
  z-index: 1;
  pointer-events: none;
  color: #999;
}

.disabled-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  z-index: 2;
}

.icon {
  position: relative;
  z-index: -1;
  filter: grayscale(100%);
}

为什么会出现这个问题？ #

简单来说：当元素应用了filter（除了none），浏览器会自动为它创建一个新的堆叠上下文，这个上下文会把元素的层级“抬高”，如果伪元素所在的父级没有自己的堆叠上下文，就会被内部这个带滤镜的元素压在下面。

内容的提问来源于stack exchange，提问作者lolbas