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

Question

我想要一个叠加层，即 DOM 中“可能很深的某个地方”。

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>