<input type="checkbox" id="layers"><label for="layers">Show Layers</label>
<div class="sticky-container case-1">
  <div class="content">
    <h2>z-index: 2</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
  </div>
  <div class="sticky-item">
    <h2>z-index: 1</h2>
    <img src="https://i1.wp.com/eladsc.com/wp-content/uploads/2019/11/1_vv_brCwJNVFsBHQEfYC7zQ.png" alt="">
  </div>
  <div class="content">
    <h2>z-index: auto</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
  </div>
</div>

<div class="sticky-container case-2">
  <div class="content">
    <h2>z-index: auto</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
  </div>
  <div class="sticky-item">
    <h2>z-index: 2</h2>
    <img src="https://i1.wp.com/eladsc.com/wp-content/uploads/2019/11/1_vv_brCwJNVFsBHQEfYC7zQ.png" alt="">
  </div>
  <div class="content">
    <h2>z-index: auto</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
  </div>
</div>

<div class="sticky-container case-3">
  <div class="content">
    <h2>z-index: 2</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
  </div>
  <div class="sticky-item">
    <h2>z-index: 1</h2>
    <img src="https://i1.wp.com/eladsc.com/wp-content/uploads/2019/11/1_vv_brCwJNVFsBHQEfYC7zQ.png" alt="">
  </div>
  <div class="content">
    <h2>z-index: 2</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
  </div>
</div>

<div class="sticky-container case-4">
  <div class="content">
    <h2>z-index: auto</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
  </div>
  <div class="sticky-item">
    <h2>z-index: auto</h2>
    <img src="https://i1.wp.com/eladsc.com/wp-content/uploads/2019/11/1_vv_brCwJNVFsBHQEfYC7zQ.png" alt="">
  </div>
  <div class="content">
    <h2>z-index: auto</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa.<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ipsa adipisci animi minus temporibus possimus rerum odio totam vitae sequi labore laudantium nulla harum consectetur, illo similique facilis, velit culpa</p>
  </div>
</div>


<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];300;400;500;700;900&display=swap" rel="stylesheet">

body{
  display:grid; 
  grid-gap:30px;
  grid-template-columns:repeat(4, 1fr);
}

.sticky-container{
      box-shadow:0 1px 1px 0 rgb(66 66 66 / 8%), 
                 0 1px 3px 1px rgb(66 66 66 / 16%);
}
.content{
  position:relative;
  background-color:#fff;
  padding:25px;
}
.sticky-item{
  position:sticky;
  top:0; 
  bottom:0; 
  background-color:#fff;
  img{max-width:100%;}
}

.case-1{
  .content:first-child{z-index:2;}
  .sticky-item{z-index:1;}
  .content{background-color:#56bcf9;}
}
.case-2{
  .sticky-item{z-index:2;}
  .content{background-color:#47cf73;}
}
.case-3{
  .content{
    z-index:2;
    background-color:#b9f;
  }
  .sticky-item{z-index:1;}
}
.case-4{
  .content{background-color:#ffdd40;}
}


*{box-sizing:border-box;}
html{font-family:roboto;}
body{margin:30px;}
h2{
  position:sticky; top:0; background-color:inherit;
  padding:10px 0 10px 0; font-weight:400; text-align:center;
}
p{font-size:20px; color:rgb(50 ,50, 50); font-weight:300;}
p + p{margin-top:20px;}
p, h2{margin:0;}
img{display:block;}
input{
  position:fixed; top:20px; left:15px; z-index:11;
  display:block; padding:5px; border:solid 1px rgb(136 136 136 / 0.7); border-radius:4px;
  background-color:rgb(255 221 64 / 0.8);
  margin-right:5px;
}
label{
  position:fixed; z-index:10; left:10px; top:10px;
  display:block; padding:10px; padding-left:30px; border-radius:4px;
  background-color:rgb(255 221 64 / 0.8);
}


:checked ~.sticky-container{
  position:relative; box-shadow:0 0 0 2px #000;
  > *{opacity:0.8;}
}