如何解决HTML内容被固定菜单遮挡的问题？

固定定位的菜单会脱离文档流，不占据页面空间，导致顶部内容被遮挡，用<br>只能临时调整，滚动时仍会出现问题。以下是两种可靠的解决方案：

方案一：CSS固定内边距适配 #

给body设置与菜单高度一致的padding-top，让内容从菜单下方开始显示，滚动时也不会被覆盖。

修改后的CSS代码： #

/*Menu*/
div.mycontainer {
  width: 100%;
  font-size: 18px;
  margin: 0; /* 移除负margin，避免菜单溢出视口 */
  overflow: auto;
  position: fixed;
  top: 0; /* 明确固定在视口顶部 */
  left: 0; /* 确保菜单左对齐 */
  background-color: black;
  z-index: 999; /* 保证菜单在内容上层 */
}

div.mycontainer div {
  width: fit-content;
  background-color: white;
  float: left;
  padding: 7px;
  padding-left: 2px;
  border-style: solid;
  border-color: #A0A0A0;
  border-width: 3px;
}

div.mycontainer a {
  color: black;
  text-decoration: none;
}

div.mycontainer div:hover {
  background-color: #34ed23;
}

/* 给内容设置顶部内边距，避开菜单 */
body {
  padding-top: 40px; /* 值等于菜单实际高度，可按需调整 */
  margin: 0; /* 移除body默认margin，避免额外间距 */
}
/*Menu End*/

修改后的HTML代码： #

<body>
  <div class="mycontainer">
    <div>
      <a href="#">Link 1</a>
    </div>
    <div>
      <a href="#">Link 2</a>
    </div>
  </div>
  <!-- 移除多余<br>，用CSS控制间距更可靠 -->
  <div style="height:2000px">
    <h1>Welcome</h1>
    标准的Lorem Ipsum段落，自1500年起使用："Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    Section 1.10.32 of "de Finibus Bonorum et Malorum"，西塞罗于公元前45年撰写："Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
    <!-- 剩余文本省略 -->
  </div>
</body>

方案二：动态计算菜单高度（适配响应式场景） #

如果菜单高度随屏幕尺寸变化，用JavaScript动态计算高度并调整内容内边距：

添加JavaScript代码： #

// 页面加载完成后计算菜单高度
window.addEventListener('load', function() {
  const menu = document.querySelector('.mycontainer');
  const menuHeight = menu.offsetHeight;
  document.body.style.paddingTop = `${menuHeight}px`;
});

// 窗口大小变化时重新计算
window.addEventListener('resize', function() {
  const menu = document.querySelector('.mycontainer');
  const menuHeight = menu.offsetHeight;
  document.body.style.paddingTop = `${menuHeight}px`;
});

这样无论菜单高度如何变化，内容都会自动避开菜单，不会被遮挡。

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