固定定位Navbar异常：页面内容覆盖导航栏问题排查

问题核心原因 #

• 使用position: fixed的元素会脱离正常文档流，页面其他内容不会自动为它预留空间，因此会向上偏移到导航栏原本的位置
• 若导航栏被内容覆盖，是因为导航栏的z-index层级低于其他元素，导致被压在下方

具体修复方案 #

1. 提升导航栏层级，确保显示在最上层 #

给nav元素设置足够高的z-index，保证它能覆盖所有页面内容：

nav {
  position: fixed;
  top: 0;
  z-index: 999; /* 数值只要比其他元素的z-index大即可，常用999/1000 */
  width: 100%; /* 可选，确保导航栏铺满页面宽度 */
}

2. 给页面内容添加顶部间距，避免被遮挡 #

因为fixed元素脱离文档流，需要给header（directory）和main元素添加等于导航栏高度的顶部外边距，让内容从导航栏下方开始显示：
假设导航栏高度为60px，代码如下：

header.directory, main {
  margin-top: 60px; /* 数值与导航栏实际高度保持一致 */
}

3. 排查其他元素的定位设置 #

如果问题仍存在，检查header或main元素是否设置了position: relative/absolute且z-index值高于导航栏，若有则调整它们的z-index值低于导航栏的z-index。

额外提示 #

• 若导航栏高度是动态变化的（比如响应式布局下高度改变），可以使用CSS变量统一管理高度，或者通过JavaScript动态计算并设置内容的顶部间距。

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