如何避免添加元素时Div发生垂直位置偏移

问题根源：你当前用position: relative; top: -18px;的hack方式强制贴合头部，本质是在抵消浏览器默认布局的间距。但当mainbody内添加<p>等元素时，<p>默认的margin-top会触发外边距折叠，导致整个mainbody被顶起，出现偏移。

解决方案： #

1. 重置全局默认样式，消除浏览器自带的margin/padding干扰：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

2. 移除mainbody的定位hack，让元素遵循正常文档流布局，同时统一容器宽度避免视觉错位：

修改后的完整CSS：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.menucontainer {
  width: 1000px;
  height: 150px;
  margin: auto;
  outline: solid black 1px;
  background-image: url("images/backgrounds/mainheaderbanner.png");
  background-position: -75% 40%;
}

.mainbody {
  background-color: rgba(0, 0, 0, 0.8);
  margin: auto;
  width: 1000px; /* 和menucontainer宽度统一，确保对齐 */
  height: 1345px;
}

修正标签嵌套错误后的HTML：

<div class="menucontainer">
  <a href="index.html">
    <div class="logocontainer">
      <img src="images/logo.png" class="logo" />
    </div>
  </a>
</div>

<div class="mainbody">
  <!-- 添加任意内容都不会再偏移 -->
  <p>示例文本内容</p>
</div>

补充说明： #

如果需要mainbody保持1002px宽度（比menucontainer宽2px），可以把menucontainer的outline换成border（outline不占用布局空间，border会占据），这样两者的布局宽度匹配，视觉上也能保留边框效果：

.menucontainer {
  /* 替换outline为border */
  border: solid black 1px;
  width: 1000px;
  /* 其他样式不变 */
}

内容的提问来源于stack exchange，提问作者June S. Sai