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