顶部/底部和左侧/右侧：如何以绝对定位自动工作？

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的默认位置（位置：绝对）不在左上角，而是由于“边距崩溃”而以某种方式向下移动（如某人所述）？我不了解child2的边距（与child1在同一层）如何影响child1的位置。而且我不知道这与利润率下降有什么关系。

情况2：唯一更改的是包含元素的边框。但是，如何在父项上添加边框会影响其子项的位置？我不明白。