JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bg">
Background
</div>

<div class="parent">
Parent

<div class="child">
  <p>
  Child
  </p>
  <p>
  Child
  </p>
  <p>
  Child
  </p>
  <p>
  Child
  </p>
  <p>
  Child
  </p>
  <p>
  Child
  </p>
  <p>
  Child
  </p>
  <p>
  Child
  </p>
  <p>
  Child
  </p>
  <p>
  Child
  </p>
  <p>
  Child
  </p>
  <p>
  Child
  </p>
  <p>
  Child
  </p>
  <p>
  Child
  </p>
  <p>
  Child
  </p>
  <p>
  Child
  </p>
  
</div>
</div>

CSS

body{
  margin: 0px;
  padding: 0px;
}
.bg{
  position: sticky;
  top: 0;
  background: tomato;
  height: 75vh;
  z-index: -1;
  
}
.parent{
  height: 75vh;
  overflow: scroll;
  background: skyblue;
  z-index: 10;
}
.child{
  background: pink;
}