css - top/bottom 和 left/right: auto 如何与绝对定位一起工作？

Question

我准备了这个例子来形象化我的问题：

body {
  text-align: center;
}

.child-1 {
  width: 50px;
  height: 50px;
  background: rgba(200, 200, 255, 0.5);
  z-index: 100;
  position: absolute;

}

.child-2 {
  width: 100%;
  height: 50px;
  margin-top: 100px;
  background: rgba(255, 255, 200, 0.5);
}

.case1 {
  background: red;
}

.case2 {
  background: red;
  border: 5px solid black;
}

 <div class="case1">
   <div class="child-1">
     child 1
   </div>
   <div class="child-2">
     child 2
   </div>
 </div>
<hr>
 <div class="case2">
   <div class="child-1">
     child 1
   </div>
   <div class="child-2">
     child 2
   </div>
 </div>

案例1：为什么child1的默认位置（位置：absolute）不在左上角，而是由于“margin collapsing”（正如有人提到的）而以某种方式向下移动？我不明白 child2 的边距（与 child1 位于同一层）如何影响 child1 的位置。而且我不明白它与折叠边距有什么关系。

案例 2：唯一改变的是包含元素的边框。但是向父级添加边框如何影响其子级的位置？我不明白。

标签： csscss-position