Почему фиксированный оверлей, как дочерний элемент от липкого элемента, не покрывает другой липкий элемент - PullRequest
Новая
       17

Почему фиксированный оверлей, как дочерний элемент от липкого элемента, не покрывает другой липкий элемент

0 голосов
/ 19 июня 2019

Я хотел бы иметь оверлей, который "где-то потенциально глубоко" в DOM.

Кажется, есть проблема или что-то, что я делаю неправильно с position: sticky.

Если оверлейный элемент является дочерним по отношению к элементу "sticky sticky", тогда другой "position"липкие элементы" не покрываются правильно.

Я создал Codepen , демонстрирующий проблему.

Есть ли разумное объяснение или решение / обходной путь для этого?

1 Ответ

0 голосов
/ 19 июня 2019

Обновление: в соответствии с ОП желтая область всегда должна быть сверху без затухания.

Добавьте класс 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>
...