我有一个组件,该组件的顶部有一个“粘性”标头,并使用了混合模式的元素列表.在此简化示例中,它是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>
最佳答案
您只需添加z-index：1000；粘性风格
原文链接：https://www.f2er.com/css/530695.html.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>