Question

我想要一个覆盖，它在DOM中“可能很深的地方”。

position: sticky似乎有问题或我做错了。

如果overlay元素是“ position-sticky元素”的子元素，则其他“ position-sticky元素”将无法正确覆盖。

我创建了一个Codepen来说明问题。

对此有合理的解释或解决方案/解决方法吗？

Answer 1

更新：根据OP，黄色区域必须始终位于顶部，而不会褪色。

将z-index: 0添加到input[type="checkbox"]:checked::after类中以解决此问题。

html,
body {
  margin: 0;
}

body {
  padding-top: 40px;
}
header {
  position: fixed;
  z-index: 1;
  top: 0;
  height: 40px;
  background: green;
  width: 100%;
}
section {
  height: 100px;
  background: red;
}
section:last-of-type {
  background: purple;
  position: sticky;
  top: 40px;
}
div {
  display: flex;
}
article {
  width: 50%;
}

article:first-child {
  height: 200vh;
  background: cyan;
}

article:last-child {
  background: yellow;
  position: sticky;
  top: 140px;
  height: calc(100vh - 140px);
}

input[type="checkbox"]:checked::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 0;
}

input {
  display: block;
}

<header></header>
<section>Click me<input type="checkbox" /> I am NOT sticky</section>

<section>Click me<input type="checkbox" />I am sticky</section>
<div>
  <article>OK</article>
  <article>
    <h2>Not covered by overlay when clicking purple (which is sticky)</h2>
    <h2>Covered be overlay when clicking red
  </article>
</div>

为什么固定叠加层作为粘性元素的子元素不能覆盖其他粘性元素

1 个答案: