固定导航栏与section粘连，section的margin异常影响导航栏求助

问题原因 #

1. 固定定位脱离文档流
   当header设置position: fixed后，它会脱离正常文档流，不再占据页面空间。后续的section会默认从视口顶部开始渲染，和固定在视口顶部的header重叠，表现为“粘连”状态。

2. 外边距塌陷（Margin Collapse）
   你给section添加margin-top时，由于body与section之间无分隔元素，且body的margin被全局选择器设为0，触发了父子元素外边距塌陷：section的margin-top会合并到body上，导致整个body向下偏移，但fixed定位的header是相对于视口定位的，不会跟随body移动，因此看起来margin好像作用到了导航栏，而section与header依然重叠。

修复方案 #

方案1：给body设置顶部内边距（推荐）

先计算header的实际高度（你的logo高度约60px），给body设置padding-top等于或略大于该高度，让section自动从header下方开始布局，同时避免外边距塌陷：

body {
  padding-top: 70px; /* 比header实际高度稍大，留出空隙 */
}

同时给header设置width: 100%和top: 0，确保它占满视口顶部：

header {
  display: flex;
  flex-direction: row;
  position: fixed;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  top: 0; /* 显式固定到视口顶部 */
  background-color: #eee; /* 单独设置背景色，避免后续样式修改导致透明 */
}

方案2：给section设置足够外边距并阻止塌陷

如果偏好使用margin-top，可以给body添加overflow: hidden阻止外边距塌陷，同时设置足够大的margin-top（需大于header高度）：

body {
  overflow: hidden;
}

section {
  margin: 80px 30px; /* 增大顶部外边距，确保超过header高度 */
}

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