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

Question

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

导航栏：

     <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）。提前致谢。

这是我工作的一个例子。

Answer 1

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

.dropdown-menu与.navbarso givez-index:1010;和position:relative;to #header(其父)不在同一级别。

提琴手