position:absolute与margin-top配合异常问题求助

我做了一个包含顶部固定Header、Body区域和右侧侧边菜单的布局，发现position:absolute的侧边菜单和设置了margin-top的Body区域不能正常配合。只有两种情况能让布局恢复正常：

• 移除.container的position:relative;
• 把.container .body的margin-top改成padding-top

预期布局：

实际布局：

问题代码

CSS

.container {
  position: relative;
}

.container .header {
  height: 40px;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: lightgoldenrodyellow;
}

.container .body {
  margin-top: 40px;
}

.container .menu {
  position: absolute;
  right: 0;
  top: 0;
  background-color: lightcoral;
}

HTML

<div className={styles.container}>
  <div className={styles.header}>Header Section</div>
  <div className={styles.body}>Body Section</div>
  <div className={styles.menu}>Side Menu</div>
</div>

问题根源：外边距塌陷 + 相对定位容器的高度计算 #

1. 固定定位元素脱离文档流：.header用了position:fixed，会完全脱离正常文档流，所以.container计算自身高度时，不会考虑Header的高度，只看正常流中的.body元素。
2. 外边距塌陷导致容器整体偏移：.body设置的margin-top:40px，因为.container的顶部没有边框、内边距来隔离这个外边距，触发了CSS的外边距塌陷规则——子元素的顶部外边距会直接“转移”给父容器，导致.container整体向下偏移40px。
3. 绝对定位菜单随容器偏移：由于.container设置了position:relative，.menu的绝对定位是相对于.container的，top:0指向的是.container已经下移后的顶部，所以Menu会出现在Header下方，和预期的同高布局不符。

两种解决方法的原理 #

• 移除.container的position:relative：此时.menu的绝对定位会默认相对于视口（没有更近的非static定位祖先），top:0就是视口顶部，和Header对齐。哪怕.body的外边距塌陷仍会让.container下移，但Menu不受容器位置影响，布局自然正常。
• 将.body的margin-top改为padding-top：padding是元素内部间距，不会触发外边距塌陷。.body的padding-top:40px会让自身内容向下偏移40px，同时.container的高度会包含这个padding，所以.container的顶部仍在页面顶部，.menu相对于容器的top:0就是视口顶部，完美匹配预期布局。

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