position:sticky on :first-child

by Slava

HTML

<div class="parent">
  <div class="position-sticky">I'm sticky</div>
</div>
<div class="parent">
  <div class="position-first-child-sticky">
    <div>
      I'm first-child-sticky
    </div>
  </div>
</div>

CSS

.parent{
  height: 1000px;
  width:200px;
  position:relative;
  display:inline-block;
}
.position-sticky{
  position:-webkit-sticky;
  position:sticky;
  top:0;
  background:rgba(200,220,255,0.5);
}
.position-first-child-sticky{position:relative;}
.position-first-child-sticky > :first-child{
  position:-webkit-sticky;
  position:sticky;
  top:0;
  background:rgba(255,220,200,0.5);
 }