Why does fixed overlay as child from sticky element not cover other sticky element

Question

I'd like to have an overlay, that is "somewhere potentially deep" in the DOM.

There seems to be a problem or something I am doing wrong with position: sticky though.

If the overlay element is a child of a "position-sticky element", then other "position-sticky elements" are not covered correctly.

I created a Codepen demonstrating the problem.

Is there a reasonable explanation or solution/workaround for this?

here is the details: https://stackoverflow.com/a/56627794/8620333 (cannot close as duplicate) .. sticky create a stacking context making the fixed element trapped there and cannot cover external ones — Temani Afif, Jun 19 '19 at 08:32

Ismail Vittal · Answer 1 · 2019-06-19T08:39:12.517

Update: As per the OP the yellow area needs to be on top always without the fade.

Add the z-index: 0 to input[type="checkbox"]:checked::after class to fix the issue.

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>

The problem is, that the sticky (yellow) becomes "inactive" with x-index -1. Inputs are not editable etc (I updated the codepen to show this). — lipp, Jun 19 '19 at 08:11
you want the yellow area to be edited and at the same time the overlay should be on top ? — Ismail Vittal, Jun 19 '19 at 08:15

Why does fixed overlay as child from sticky element not cover other sticky element

1 Answers1