下拉菜单项被导航栏中的导航栏隐藏起来

Question

我正在使用bootstrap 3构建一个网页，而且我面临着多个固定导航栏的问题。我已经安排了固定的导航栏，我面对的问题是，第一个固定导航栏中的下拉菜单并不完全可见，因为第二个固定导航栏隐藏了它。

我试着将下拉的z-index设置为一个更高的值，但它不起作用。

提琴手：https://jsfiddle.net/99x50s2s/152/

代码：

<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> 

后市展望：

下拉项目应该是visib在第二个固定的导航栏上方。任何建议表示赞赏。

Answer 1

您可以制作两个导航栏，以便它们固定，并且您有一些应该调整的HTML请参阅Docs。

查看示例代码段。

.navbar .navbar-brand { 
 
    padding: 1px 5px; 
 
    margin: 0; 
 
    height: 30px; 
 
} 
 
.navbar.navbar-top { 
 
    margin-bottom: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar-fixed-top"> 
 
    <div class="navbar navbar-default navbar-static-top navbar-top"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 

 
     </button> 
 
     <a class="navbar-brand" href="#"> 
 
      <img src="https://cdn4.iconfinder.com/data/icons/SUPERVISTA/animals/png/48/swallow_bird.png"></img> 
 
     </a> 
 

 
     </div> 
 
     <div class="collapse navbar-collapse" id="bs-nav"> 
 
     <ul class="nav navbar-nav navbar-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> 
 
    </div> 
 
    </div> 
 
    <div class="navbar navbar-inverse navbar-static-top"> 
 
    <div class="container-fluid"> 
 
     <p class="navbar-text">Instruction will appear here...</p> 
 
    </div> 
 
    </div> 
 
</nav>

Answer 2

你能改变DOM中元素的顺序吗？ 如果是这样，只需在.navbar-fixed-top之前放.navbar-fixed-top2即可。

如https://jsfiddle.net/99x50s2s/154/

Answer 3

我底部导航栏的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> 

Answer 4

尝试类似下面的小提琴：

https://jsfiddle.net/99x50s2s/155/

我已经添加了一些CSS：

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

和身份证到actionLinks

参考： http://sevenspark.com/diagnosis/z-index-submenu-hidden-behind-content