2个Bootstrap导航栏重叠（想要一个固定在另一个下面）

Question

我有这个网站有2个导航栏，但是黑暗的导航栏一直被灯光遮挡，我希望灯光在上面，而在它下面是黑暗的，我的代码出了什么问题？

link：https://paragon.fun/punishments/bans.php

Answer 1

这是因为您指定的positioning。您在灯光导航栏上使用fixed，在黑暗栏杆上使用relative。

这取决于你想要达到的目标。如果暗导航栏应位于灯光下方fixed，您只需添加以下CSS：

.navbar-inverse {
  position: fixed;
  top: 50px;
  width: 100%;
}

但是如果黑暗的导航栏应该只位于浅色导航栏下方，没有任何粘性，则需要指定top距离：

.navbar-inverse {
  top: 50px; // equal to the light navbars height
}

之所以发生这种情况，是因为您在光导航条上使用fixed定位，它将从documentflow中删除。固定元素将不再影响relative定位元素（如暗导航栏）的定位。