导航栏固定顶部后滚动时被下方div覆盖的问题求助

你已经成功实现了导航栏固定在顶部的功能，但滚动时被下方div覆盖的问题，本质是**元素堆叠层级（z-index）**的冲突——固定定位的元素如果层级不够高，就会被后续元素压在下方。

这里给你一套简单直接的解决方案：

• 给导航栏设置一个足够高的z-index值，确保它处于所有页面元素的最上层；
• 可选优化：给页面主体内容添加上边距，避免导航栏遮挡顶部内容。

具体代码实现 #

在你的CSS中添加以下样式：

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999; /* 这个高值能确保导航栏不会被其他普通元素覆盖 */
}

/* 可选：如果导航栏高度是56px，给下方内容添加上边距，避免被遮挡 */
.main-content {
  margin-top: 56px;
}

原理说明 #

• position: fixed让导航栏脱离文档流，但它的默认堆叠层级可能和其他元素重叠，z-index: 9999强制将其置于最上层；
• 添加上边距是因为固定定位元素不占用文档流空间，下方内容会默认从页面顶部开始渲染，这个设置能让内容从导航栏下方正常显示。

如果你用的Bootstrap导航栏已经自带fixed-top类，它本身包含了基础的position: fixed和z-index，但如果你的其他div设置了更高的z-index，手动给导航栏设置更高的层级就能解决冲突。

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