如何避免绝对定位div受同级静态定位div margin-top的影响

你遇到的是**外边距折叠（Margin Collapse）**导致的异常：由于body没有设置内边距或边框，静态定位的.div-2的margin-top会和body的上边距发生折叠，让整个body向下偏移；而绝对定位的.div-1是基于body定位的，因此也跟着一起下移了。

下面是几种简单有效的解决方法：

方法1：打断body的外边距折叠 #

给body添加极小的内边距或透明边框，就能阻止子元素的外边距向上穿透：

body {
  font-family: sans-serif;
  margin: 0;
  padding: 1px; /* 或者用 border-top: 1px solid transparent; */
  position: relative;
}

方法2：修改.div-2的外边距实现方式 #

把margin-top换成padding-top（记得加box-sizing: border-box避免元素高度增加），或者给.div-2套一个带overflow: hidden的容器，隔离外边距：

.div-2 {
  height: 200px;
  width: 90%;
  background-color: blueviolet;
  padding-top: 8rem;
  box-sizing: border-box; /* 保持元素总高度不变 */
}

容器包裹的写法：

<div class="container">
  <div class="div-2"></div>
</div>

.container {
  overflow: hidden;
}

方法3：固定绝对定位div的顶部位置 #

给绝对定位的.div-1明确设置top: 0，强制它固定在body的顶部，不受body位置变化影响：

.div-1 {
  position: absolute;
  border: 2px solid red;
  width: 90%;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 100vh;
  top: 0; /* 新增该行 */
}

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