javascript - 修复可滚动 div 内的元素

Question

.parent div 有overflow: scroll 而.child 有position: fixed。我想滚动 .parent div 的内容，同时保留 .child 在其中的位置。

.parent {
  border: 1px;
  height: 500px;
  width: 900px;
  overflow: scroll;
}

.child {    
  background: black;
  color: white;
  position: fixed;    
  height: 100px;
  width: 900px;
}

<div class="parent">
  parent
  <div class="child">
    child
  </div>
</div>

Answer 1

.parent {
height:500px;
width:500px;
overflow:scroll;
position:absolute;
background:black;
}


.child {

position: sticky;
top:0;
height:80px;
width:500px;
background-color: #cae8ca;
}

<div class = "parent" >
<div class = "child"  >
chi
</div>
<hr>
<br>
<hr>
<br>
<hr>
<br>
<hr>
<br>
<hr>
<br>
<hr>
<br>
<hr>
<br>
<hr>
<br>
<hr>
<br>
<hr>
<br>
<hr>
<br>
<hr>
<br>
<hr>
<br>
<hr>
<br>
<hr>
<br>
<hr>
<br>
<hr>
<br>
<hr>
<br>
<hr>
<br>
<hr>
<br>
<hr>
<br>
</div>