我有兩個元素，每個元素的邊距都是20px。第一個定位絕對。自然，第二個元素在頂部結束，并從屏幕邊緣后退20px。

div {
  width: 200px;
  height: 200px;
}

.posa {
  margin-top: 20px;
  position: absolute;
  background-color: #1239;
}

.normal {
  margin-top: 20px;
  margin-left: 20px;
  background-color: #aaa9;
}

<div class="posa">position</div>
<div class="normal">normal</div>

normal元素的margin-top隨著body margin一起折疊，因為它是第一個流入子元素，然后absolute元素使用body元素作為參考向下移動。它使用靜態位置，因為您沒有指定任何上/左/右/下值

將outline添加到body元素中可以注意到這一點:

div {
  width: 200px;
  height: 200px;
}

.posa {
  margin-top: 20px;
  position: absolute;
  background-color: #1239;
}

.normal {
  margin-top: 20px;
  margin-left: 20px;
  background-color: #aaa9;
}

body {
 outline: 1px solid red;
}
html {
 outline: 1px solid blue;
 outline-offset: -1px;
}

<div class="posa">position</div>
<div class="normal">normal</div>