是否有可能忽略元素的混合模式（mix-blend-mode）？

Question

我有一个组件，它在顶部有一个“粘性”头部和一系列使用混合模式的元素列表。在这个简化的例子中，它是包含在div中的标题。

它一直很好地工作，直到我滚动内容为止。如果我向下滚动，混合模式也会应用于与我不想要的元素进行混合的“粘性”头部。

是否有任何方法使“粘性”头部忽略另一个元素的混合模式，并始终只覆盖背后的元素。

请参见下面的代码。

<div>
    <div style="display: flex; flex-direction: column; height: 700px; max-height: 700px; overflow: auto; text-align: center;">
        <div style="position: sticky; top: 0px; background: blue;">Sticky</div>
        <div style="background: lightblue;">
            <h1 style="background: red; mix-blend-mode: multiply;">ABC</h1>
        </div>
        <div style="background: lightblue;">
            <h1 style="background: red; mix-blend-mode: multiply;">ABC</h1>
        </div>
        /* a lot of other elements like 2 above*/
    </div>
</div>

- Valerii

---

如果你说这个问题与React无关，为什么不将你的代码翻译成“普通”的HTML/CSS，让那些不了解React但能回答这个CSS问题的人也能看懂呢？ - Mister Jojo

@MrJ，我认为即使对于不了解React的人来说，这里正在发生什么也很清楚。我将把代码翻译成普通的HTML/CSS。 - Valerii

@MrJ。我更新了问题。 - Valerii

Answer 1

将“sticky”标题的z-index设置为大于0的任何值都可以解决这个问题。我认为该值应该大于元素的z-index。最初的回答。

- Valerii

Answer 2

您只需要在Sticky样式中添加z-index: 1000;即可。"Original Answer"翻译成"最初的回答"。

.class_Parent {
  display: flex;
  flex-direction: column;
  height: 700px;
  max-height: 700px;
  overflow: auto;
  text-align: center;
}
.class_Sticky {
  position: sticky;
  top: 0px;
  background-color: blue;
  z-index: 1000;
}
.class_ABC {
  background: lightblue;
}
.class_ABC h1 {
  background: red;
  mix-blend-mode: multiply;
}

<div>
  <div class="class_Parent">
    <div class="class_Sticky">Sticky</div>

    <div class="class_ABC"> <h1>ABC</h1> </div>
    <div class="class_ABC"> <h1>ABC</h1> </div>
    <div class="class_ABC"> <h1>ABC</h1> </div>
    <div class="class_ABC"> <h1>ABC</h1> </div>
    <div class="class_ABC"> <h1>ABC</h1> </div>
    <div class="class_ABC"> <h1>ABC</h1> </div>
    <div class="class_ABC"> <h1>ABC</h1> </div>
    <div class="class_ABC"> <h1>ABC</h1> </div>
    <div class="class_ABC"> <h1>ABC</h1> </div>
    <div class="class_ABC"> <h1>ABC</h1> </div>
    <div class="class_ABC"> <h1>ABC</h1> </div>
    <div class="class_ABC"> <h1>ABC</h1> </div>
    <div class="class_ABC"> <h1>ABC</h1> </div>
    <div class="class_ABC"> <h1>ABC</h1> </div>

  </div>
</div>

- Mister Jojo

---

是的，看起来是这样，我只是花了更长时间来制作一个例子。 - Mister Jojo