是否可以忽略元素的混合混合模式？

Question

我有一个组件，该组件的顶部有一个“粘性”标头，并使用了混合模式的元素列表。在此简化示例中，它是div中的标头。

直到我滚动内容，它都可以正常工作。如果向下滚动，则混合模式也适用于将“粘性”标题与元素混合，这不是我想要的。

有什么方法可以制作一个“粘性”标题，以忽略另一个元素的混合模式，并且始终只覆盖后面的元素。

请参见下面的代码。

footer

Answer 1

将“ sticky”标头的z-index设置为大于0的任何值即可解决此问题。我认为值应该大于元素的z-index。

Answer 2

您只需要在粘性样式上添加z-index: 1000;

.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>