在可滾動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>