fixed定位header遮挡main内容，添加margin-top无效求助

问题原因 #

固定定位（position: fixed）的.header会脱离文档流，不再占据页面空间。当你给.main加margin-top时，由于外边距合并规则，这个外边距会传递给父元素（body），导致整个页面内容下移，而非仅让.main避开导航栏。

解决方案 #

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

直接给body设置与导航栏高度一致的padding-top，让所有页面内容自动避开固定导航栏：

body {
  background-color: black;
  font-size: 22px;
  color: seashell;
  opacity: 0.9;
  text-align: center;
  padding-top: 69px; /* 数值等于导航栏高度 */
  margin: 0; /* 可选：清除body默认外边距，避免额外间距 */
}

方法2：给.main添加顶部内边距 #

若不想影响body下的其他元素，用padding-top代替margin-top给.main设置间距，内边距不会触发外边距合并：

.main {
  padding-top: 69px; /* 数值等于导航栏高度 */
}

方法3：添加占位元素 #

在.header后新增一个与导航栏等高的空div，占据原本导航栏的文档流位置：

<div class="header">...</div>
<div class="header-placeholder"></div>
<div class="main">...</div>

.header-placeholder {
  height: 69px; /* 与导航栏高度一致 */
}

额外语法修正 #

你的HTML里存在几处id属性的写法错误：

<!-- 错误写法 -->
<div #="downtown">
<!-- 正确写法 -->
<div id="downtown">

请同步修改#east和#oakdale为id="east"、id="oakdale"。

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