Jquery 下拉项由引导中的导航栏隐藏

我正在使用Bootstrap3构建一个网页，我面临多个固定导航条的问题。我已经一个接一个地安排了固定导航栏，我面临的问题是，第一个固定导航栏中的下拉列表不完全可见，因为第二个固定导航栏正在隐藏它

我尝试将下拉列表的z索引设置为更高的值，但没有成功

小提琴手：

代码：

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
      <img src="https://cdn4.iconfinder.com/data/icons/SUPERVISTA/animals/png/48/swallow_bird.png"></img>
    <ul class="nav navbar-nav pull-right">       
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Action Links <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
  </div>
</nav>
<nav class="navbar navbar-inverse navbar-fixed-top nav2">
  <div class="container-fluid">
      <p class="navbar-text">Instruction will appear here...</p>
  </div>
</nav>

说明将出现在此处

期望值：

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
      <img src="https://cdn4.iconfinder.com/data/icons/SUPERVISTA/animals/png/48/swallow_bird.png"></img>
    <ul class="nav navbar-nav pull-right">       
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Action Links <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
  </div>
</nav>
<nav class="navbar navbar-inverse navbar-fixed-top nav2">
  <div class="container-fluid">
      <p class="navbar-text">Instruction will appear here...</p>
  </div>
</nav>

---

下拉项应在第二个固定导航栏上方可见。非常感谢您的建议。

您能更改DOM中元素的顺序吗？ 如果是这样，只需将

.navbar-fixed-top2

放在

.navbar-fixed-top

之前

---

与

一样，您可以更改DOM中元素的顺序吗？ 如果是这样，只需将

.navbar-fixed-top2

放在

.navbar-fixed-top

之前

---

正如在

中一样，我将底部导航栏的z-指数降低为负值，并起到了作用

 <nav class="navbar navbar-inverse navbar-fixed-top nav2" style="z-index:-100;">
  <div class="container-fluid">
      <p class="navbar-text">Instruction will appear here...</p>
  </div>
</nav>

说明将出现在此处

我将底部导航栏的z-索引降低为负值，它起作用了

 <nav class="navbar navbar-inverse navbar-fixed-top nav2" style="z-index:-100;">
  <div class="container-fluid">
      <p class="navbar-text">Instruction will appear here...</p>
  </div>
</nav>

说明将出现在此处

试试下面的小提琴：

我添加了一些CSS：

#actionlinks{
  position:relative;
  z-index:50;
}
.nav2{
  position:relative;
  z-index:30;
}

和操作链接的ID

参考：

---

试试下面的小提琴：

我添加了一些CSS：

#actionlinks{
  position:relative;
  z-index:50;
}
.nav2{
  position:relative;
  z-index:30;
}

和操作链接的ID

参考：

---

您可以将两个导航栏都括起来，这样它们是固定的，您就有了一些需要调整的HTML，请参见

请参阅示例代码段

.navbar.navbar品牌{
填充物：1px 5px；
保证金：0；
高度：30px；
}
.navbar.navbar-top{
页边距底部：0；
}

切换导航















说明将出现在此处

您可以将两个导航栏都括起来，这样它们是固定的，您就有了一些需要调整的HTML，请参见

请参阅示例代码段

.navbar.navbar品牌{
填充物：1px 5px；
保证金：0；
高度：30px；
}
.navbar.navbar-top{
页边距底部：0；
}

切换导航















说明将出现在此处

这里的大多数答案都是基于。如果你明白了这一点，你就会明白为什么调整z指数没有帮助，为什么很多答案都集中在导航栏的固定位置上，这也会帮助你理解如何处理它。是的，在我的项目中使用它之前，我做了一些调整，但几乎每一个建议都能帮助我获得想法。谢谢大家。这里的大多数答案都是基于。如果你明白了这一点，你就会明白为什么调整z指数没有帮助，为什么很多答案都集中在导航栏的固定位置上，这也会帮助你理解如何处理它。是的，在我的项目中使用它之前，我做了一些调整，但几乎每一个建议都能帮助我获得想法。谢谢大家。