两个Bootstrap导航栏重叠：如何实现上下固定排列？

我帮你分析下这个问题，Bootstrap导航栏的遮挡问题通常和定位方式、HTML顺序以及z-index层级这三个因素有关，结合你的需求（浅色在上、深色在下），咱们一步步排查：

1. 先检查导航栏的定位类型 #

Bootstrap的fixed-top类会让导航栏固定在页面顶部，默认的z-index是1030。如果你的两个导航栏都用了fixed-top，那层叠顺序首先由HTML代码的顺序决定——后面出现的导航栏会覆盖前面的（因为相同z-index下，DOM流中靠后的元素层级更高）。

如果现在深色导航栏被浅色遮挡，说明要么浅色导航栏在HTML结构中写在了深色的后面，要么它的z-index比深色的更高。而你想要的就是浅色在上，这个逻辑本身是对的，但如果是深色导航栏本该显示在浅色下方却被完全挡住，那问题可能出在固定导航栏没有给下方元素留出空间。

2. 调整z-index确保层级正确 #

如果你的两个导航栏都设置了fixed-top，想要浅色在上、深色在下，需要确保浅色导航栏的z-index比深色的高（或者保持默认，只要浅色在HTML中靠后）。

比如给浅色导航栏加一个自定义类，手动提高z-index：

/* 自定义类，让浅色导航栏层级更高 */
.navbar-light-top {
  z-index: 1031; /* 比默认的1030高1即可 */
}

然后修改浅色导航栏的HTML：

<nav class="navbar navbar-light bg-light fixed-top navbar-light-top">
  <!-- 你的浅色导航栏内容 -->
</nav>

深色导航栏保持默认的fixed-top即可（z-index默认1030），这样浅色就会稳稳地在深色上方。

3. 解决内容遮挡问题（关键） #

如果你的深色导航栏是紧随浅色下方的，固定定位的浅色导航栏会盖住深色的顶部。这时候需要给深色导航栏设置margin-top，值等于浅色导航栏的高度；或者给整个页面的body设置padding-top，值等于两个导航栏的高度之和，避免页面内容也被遮挡。

比如浅色导航栏高度是56px（Bootstrap默认navbar高度），那给深色导航栏加：

.navbar-dark {
  margin-top: 56px;
}

4. 检查HTML结构顺序 #

如果不想自定义z-index，也可以直接调整HTML代码的顺序：把浅色导航栏的代码放在深色导航栏的后面。因为相同z-index下，DOM中靠后的元素层叠层级更高，这样浅色自然就会在深色上方。

举个例子：

<!-- 深色导航栏先写 -->
<nav class="navbar navbar-dark bg-dark fixed-top">
  <!-- 深色导航内容 -->
</nav>

<!-- 浅色导航栏后写，自动覆盖前面的深色导航 -->
<nav class="navbar navbar-light bg-light fixed-top">
  <!-- 浅色导航内容 -->
</nav>

总结一下，你可以优先尝试调整HTML顺序，或者自定义z-index，再配合margin/padding解决内容遮挡的问题，这样就能实现浅色导航在上、深色在下的效果了。

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