修复可滚动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

＆＃13;

＆＃13;

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


.child {

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;