absolute定位为什么会随着滚动条滚动？

Question

<div class="parent">
    <div class="child1">child1</div>
    <div class="child2">child2</div>
  </div>

就是这么简单的一个父容器包含两个子容器

.parent{
  width:400px;
  height:100px;
  overflow: auto;
  background-color: #ccc;
  position: relative;
}
.child1{
  width:200px;
  height:20px;
  position: absolute;
  top:20px;
  left:0;
  background-color: yellow;
  z-index: 9;
}
.child2{
  width:300px;
  height:300px;
  background-color: red;
}

代码如上也很简单，就是不能够理解，.child1就是相对.parent的绝对定位，父元素高度就是100px,为什么.child1也会随着滚动条滚上去呢？不太能够理解。。。
到底应该怎么理解absolute呢，求大神解答。

Answer 1

设置overflow: auto;
parent高度小于child高度出现滚动条
child1距离parent顶部20px;
当然会滚上去了,你如果设置成相对于parent的父辈定位的话 就不会滚

Answer 2

父亲走了孩子还会留在原地吗？

Answer 3

滚动区域相当于另一个页面，在一个页面内绝对定位的元素会随滚动条位置而发生位置变化

Answer 4

把父级的相对定位去了就不会滚了

Answer 5

相对于父元素定位，但是父元素本身会滚动，所以跟着上去了。如果把position:relative移动到不会滚动的爷爷元素上就正常了了。

Answer 6

只是相对于parent的绝对定位，也就是说child相对于parent的位置是不会变得，而相对于parent的父元素的位置是不确定的

Answer 7

我也遇到相关问题了，原因是z-index属性的原因，你去掉z-index就没这个问题了

Answer 8

父节点并不是绝对定位，子节点不能够绝对定位。

Answer 9

https://segmentfault.com/q/10...
可以与这个问题下的采纳答案对比下