如何修复滚动时说明文本越过导航栏的问题

核心原因 #

这种问题通常是因为导航栏的堆叠层级（z-index）低于页面内容，或者导航栏没有设置正确的定位属性，导致无法在滚动时维持上层显示。

具体修复步骤 #

1. 给导航栏设置正确的定位 #

导航栏需要设置固定定位或粘性定位，确保滚动时它固定在页面顶部：

.navbar {
  position: fixed; /* 也可以用 position: sticky; 搭配 top: 0; */
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff; /* 必须加背景色，避免内容透过导航栏显示 */
}

2. 提升导航栏的堆叠层级 #

给导航栏设置足够高的z-index，确保它始终在页面内容上方：

.navbar {
  z-index: 9999; /* 数值只要比页面内容的z-index大即可，9999是常用的安全值 */
}

3. 调整页面主体的顶部间距（可选） #

如果用了position: fixed，导航栏会脱离文档流，可能遮挡页面顶部内容，这时需要给页面主体加内边距：

body {
  padding-top: 80px; /* 数值等于导航栏的实际高度 */
}

额外检查点 #

• 确认页面内容元素没有设置比导航栏更高的z-index值
• 如果使用sticky定位，导航栏的父元素不能设置overflow: hidden，否则粘性定位会失效

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