设置position:absolute的div为何被同级div的margin影响偏移？

为什么绝对定位的div1会被顶部推开？ #

这是外边距折叠引发的特殊情况：

• 你的代码里没有给body设置内边距、边框或触发BFC的属性，此时同级元素div2的margin:3rem会向上传递给父元素body，导致body被向下推。
• 绝对定位元素如果没设置top/left，它的初始位置是它在正常文档流中原本该占据的位置。因为body被div2的margin推得下移，div1的初始定位位置也跟着下移，看起来就像受了div2的影响。

不用top:0让div1紧贴顶部的方法 #

只要阻止div2的margin和body发生折叠即可，以下几种方法都可行：

方法1：给body加顶部内边距 #

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  padding-top: 1px; /* 极小内边距，不影响整体布局 */
}

.div1 {
  margin: 0rem;
  background: red;
  position: absolute;
}

.div2 {
  margin: 3rem;
  background: grey;
}

方法2：给body加透明顶部边框 #

body {
  border-top: 1px solid transparent; /* 边框会阻断外边距折叠 */
}

方法3：给body触发BFC #

body {
  overflow: auto; /* 触发块级格式化上下文，阻止外边距向上传递 */
}

这些方法的核心都是让body不再和div2发生外边距折叠，body保持紧贴视口顶部，div1的初始绝对定位位置也就回到了顶部。

内容的提问来源于stack exchange，提问作者AdamJ