Bootstrap 下拉列表位于导航栏下方答案

【问题标题】：Bootstrap drop down list goes under the nav barBootstrap 下拉列表位于导航栏下方
【发布时间】：2016-03-25 21:01:48
【问题描述】：

这是下拉菜单出现时的样子。

导航栏：

     <nav class="navbar navbar-default" role="navigation">

                                <div class="navbar-header">
                                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                                        <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="#">Categories</a>
...

下拉菜单：

<ul class="dropdown-menu">

            <li>
               <div class="panel panel-default">
                 <div class="panel-body">
                  <div class="panel-info">
                    <p><strong>Black Dress</strong></p>
                      <p>Each Price :&nbsp;<strong>Rs. 500.00</strong></p>
                      <p>Quantity :&nbsp; <input type="number" value="3"/> 
                    <a href="#"><span class="glyphicon glyphicon-refresh"></span></p>
                                   ....

尝试定位(position:relative)。但无法获得所需的结果。（下拉nav-bar）。提前致谢。

这是my work 的示例。

【问题讨论】：

你必须使用z-index。
@alirezasafian 我用过。但什么都没有改变。这是我如何使用它。 .dropdown { z-index: 1010; }
.dropdown-menu {z-index:99999;}
请发布您完成的代码或提供演示。
@yjs 。我试过了。但结果还是一样。

标签： html css drop-down-menu twitter-bootstrap-3 navbar

【解决方案1】：

为什么给定的z-index 不起作用？

.dropdown-menu 与.navbar 不在同一级别，因此将z-index:1010; 和position:relative; 分配给#header（其父级）。

Jsfiddle

【讨论】：

非常感谢......它工作正常。不幸的是，我无法对您的答案进行投票。 :(
没关系。祝你好运。