子元素绝对定位position: absolute跟随父元素overflowscroll滚动了

起因

写项目的时候忽然遇到一个问题，子元素绝对定位position: absolute，父元素（box）设置 overflow:scroll超出部分滚动。
结果定位的元素（child-1）仍然会随着滚动条滚动，按照原先的理解，父元素内部滚动是不会影响固定定位的元素的。

<div class="box">
    <div class="child-1"></div>
    <div class="child-2"></div>
</div>
<style>
    .box {
        height: 300px;
        background-color: red;
        padding-top: 200px;
        position: relative;
        overflow: scroll;
    }
    .child-1 {
        position: absolute;
        top: 0;
        height: 100px;
        width: 100%;
        background-color: green;
        z-index: 999;
    }
    .child-2 {
        height: 400px;
        background-color: deepskyblue;
    }
</style>
复制

结果就是出现横向滚动条时，child-1元素会跟随滚动条滚动。

解决方法

出现这样的问题就是因为父元素设置了position: relative，父元素相对定位会导致，滚动条在滚动的同时，将父元素的位置也移动了，而child-1定位于父元素，所以会跟随父元素一起滚动。
所以我们解决方法就是在 child-2外层再套一层用于滚动的div。

<div class="box">
       <div class="child-1"></div>
       <div class="scroll">
           <div class="child-2"></div>
       </div>

</div>
<style>
   .box {
       height: 300px;
       background-color: red;
       position: relative;
       overflow: scroll;
   }
   .child-1 {
       position: absolute;
       top: 0;
       height: 100px;
       width: 100%;
       background-color: green;
       z-index: 999;
   }

   .scroll {
       height: 100%;
       overflow: scroll;
       padding-top: 200px;
   }

   .child-2 {
       height: 400px;
       background-color: deepskyblue;
   }
</style>
复制

补充position 属性小知识点

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。