代码之家 › 专栏 › 技术社区 › Valerii

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

css javascript

Valerii · 技术社区 · 7 年前

我有一个组件,它的顶部有一个“粘性”标题,以及使用混合模式的元素列表。在这个简化的示例中,它是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>

2 回复 | 直到 7 年前

Valerii 7 年前

将“粘性”标题的z索引设置为任何大于0的值可以解决此问题。我认为这个值应该大于元素的z指数。

Mister Jojo Åukasz Daniel Mastalerz 7 年前

你只要加上 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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前