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

<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呢，求大神解答。

---

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

---

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

---

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

---

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