如何让fixed定位元素置于CSS mask-image遮罩之上？

我有一个带mask-image的可滚动容器，用mask实现了适配任意背景色的上下透明淡出效果。现在需要将容器内的子元素设置为position: fixed并置于遮罩上方，但遮罩始终处于顶层，调整z-index也无法解决该问题。

原代码示例 #

CSS #

.faded {
  z-index: 1;
  background: red;
  width: 150px;
  height: 100px;
  overflow: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 48px, black calc(100% - 48px), transparent 100%)
}

.fixed-header {
  position: fixed;
  top: 0;
  background: green;
  left: 0;
  z-index: 99999;
}

HTML #

<div class="faded">
  <div class="fixed-header">
    Fixed Header
  </div>
  1) Item 1 - Test<br />
  2) Item 2 - Test<br />
  3) Item 3 - Test<br />
  4) Item 4 - Test<br />
  5) Item 5 - Test<br />

  6) Item 6 - Test<br />
  7) Item 7 - Test<br />
  8) Item 8 - Test<br />
  9) Item 9 - Test<br />
  10) Item 10 - Test<br />

  11) Item 11 - Test<br />
  12) Item 12 - Test<br />
  13) Item 13 - Test<br />
  14) Item 14 - Test<br />
  15) Item 15 - Test<br />
</div>

原因分析 #

直接给容器设置mask-image会创建一个堆叠上下文，容器内的所有子元素（包括fixed定位的元素）都会被限制在这个堆叠上下文内部。无论子元素的z-index设多高，都无法突破容器的遮罩层——因为遮罩是容器本身的一部分，属于更高层级的堆叠上下文。

解决方案 #

把遮罩效果用容器的伪元素实现，这样遮罩作为容器的上层伪元素，不会影响子元素的堆叠层级。同时fixed定位的元素会脱离文档流，不受容器堆叠上下文的限制，就能正常显示在遮罩上方。

修改后的代码 #

CSS

.faded {
  z-index: 1;
  background: red;
  width: 150px;
  height: 100px;
  overflow: auto;
  position: relative; /* 让伪元素相对于容器定位 */
}

/* 用伪元素实现遮罩，替代直接给容器加mask-image */
.faded::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none; /* 不阻挡容器内的滚动、点击等交互 */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 48px, black calc(100% - 48px), transparent 100%);
  background: inherit; /* 继承容器背景色，实现适配任意背景的淡出效果 */
}

.fixed-header {
  position: fixed;
  top: 0;
  background: green;
  left: 0;
  z-index: 99999;
}

HTML

<div class="faded">
  <div class="fixed-header">
    Fixed Header
  </div>
  1) Item 1 - Test<br />
  2) Item 2 - Test<br />
  3) Item 3 - Test<br />
  4) Item 4 - Test<br />
  5) Item 5 - Test<br />

  6) Item 6 - Test<br />
  7) Item 7 - Test<br />
  8) Item 8 - Test<br />
  9) Item 9 - Test<br />
  10) Item 10 - Test<br />

  11) Item 11 - Test<br />
  12) Item 12 - Test<br />
  13) Item 13 - Test<br />
  14) Item 14 - Test<br />
  15) Item 15 - Test<br />
</div>

关键说明 #

• 伪元素::after作为遮罩层覆盖在容器上方，pointer-events: none保证它不会干扰容器内内容的交互。
• background: inherit确保遮罩层和容器背景色一致，保留了“适配任意背景色”的淡出效果。
• fixed定位元素脱离了容器的堆叠上下文，自然能显示在遮罩层上方。

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