div scroll upon another div

by Ayyappan Sakthivadivel

HTML

<div style="height: 1000px; border: #f00 solid 3px;">
<div style="position:relative">
<div class="parent-container">
    <div class="parent">
        <div class="child red">Fixed positioned element1</div>
    </div>
</div>
</div>
<div style="position:relative; margin-top: 20px;">
<div class="parent-container">
    <div class="parent">
        <div class="child red">Fixed positioned element2</div>
    </div>
</div>
</div>
<div style="position:relative; margin-top: 20px;">
<div class="parent-container">
    <div class="parent">
        <div class="child red">Fixed positioned element3</div>
    </div>
</div>
</div>
</div>

CSS

.parent-container {
  position: relative;
  width: 100%;
  height: 200px;
}

.parent {
  position: absolute;
  width: 100%;
  height: 200px;
  background-color: yellow;
  clip: rect(0, auto, auto, 0);
}

.child {
  position: fixed;
  top: 100px;
  left: 50px;
  padding: 1em;
  background-color: red;
}