导航栏中的下拉菜单保持在所有固定元素的顶部

Question

我在导航栏中有一个下拉菜单。在它下方（导航栏下方）有一个div，其位置是固定的。当我打开下拉菜单时，它位于div 后面。我已经尝试过z-index，但它不起作用。我还将下拉菜单的位置设置为“固定”，但它没有显示任何内容。

下面是我的代码：

.dropdownmenu{
  background-color : #333;
  opacity : 0.95;
  z-index : 9999;
}

以及导航栏的html代码，其中下拉菜单为：

<li class="dropdown">
    <a href="#" class="dropdown-toggle" id="drop" data-toggle="dropdown"       role="button" aria-haspopup="true" aria-expanded="false">
        <strong>
            <%= session['user-session']%>
        </strong>
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu drop">
    <li><a href="#">My Posts</a></li>
    <li><a href="#">Settings</a></li>
    <li class="divider"></li>
    <li><%= link_to "Logout","/users/logout"%></li>
    </ul>
</li>   

js代码为：

$(document).scroll(function () 
    {
        var scroll = $(this).scrollTop();
        var topDist = $("#navbar").position();
        if (scroll > topDist.top) {
            $('.navbar').css({"position":"fixed","width":"100%","z-index":"1"});

        if($('#search').css("position") == "fixed"){
            $('#search').css({"position":"fixed" , "marginTop":"80px"});}
        }
        else if (scroll == topDist.top) {
            $('.navbar').css({"position":"fixed","width":"100%","z-index":"1"});

        if($('#search').css("position") == "fixed"){
            $('#search').css({"position":"fixed" , "marginTop":"0px"});
            $('.navbar').css({"position":"static","top":"auto"});}
        }
        else {
            $('.navbar').css({"position":"static","top":"auto"});
        }
    });                         

id #search是下面div的id

这里是搜索 div 的代码，它是固定的。菜单隐藏在它后面。

<div class="col-sm-4" id="searchDiv">
            <div class="panel panel-default serachpanel" id="search" style="height:83%;position: fixed; overflow-y: scroll;z-index: -1;">
                <div class="panel-heading">Search Persons</div>
                <div class="panel-body">
                    <div class="form-group">
                        <p>To optimize your search rresults,provide picture of </p>
                        <p>person with a clear face to do search by picture.</p>
                        <div class="row">
                            <div class="col-md-1">
                                <div id="image-holder"></div>
                            </div>      
                        </div>
                        <input id="fileUpload" type="file" class="btn-success"/> 
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <label>Enter Date and Time You want to search from:</label>
                            <input type="datetime-local" class="form-control" />
                        </div>
                    </div>
            ............

Answer 1

如果没有实际的代码，真的很难说出问题所在。从您发布的 CSS 中，我可以看到您已将 z-index 属性添加到未定位的元素，或者更确切地说具有静态位置。 z-index 仅适用于定位元素（即具有除静态以外的任何位置的元素）及其后代。

z-index 属性指定定位元素的 z-order 和 它的后代。当元素重叠时，z-order 确定哪一个 覆盖另一个。 z-index 较大的元素通常覆盖 具有较低元素的元素。

对于定位框（即，具有除 static)，z-index 属性指定：

• 框在当前堆叠上下文中的堆叠级别。
• 框是否建立本地堆叠上下文。

见：https://developer.mozilla.org/en/docs/Web/CSS/z-index

---

您可以尝试添加 position: 相对于您的选择器。它可能不适用于您的情况，但正如我所说，没有一些实际代码，我的猜测是一样的。

.dropdownmenu {
    position: relative;
    background-color: #333;
    opacity: 0.95;
    z-index: 9999;
}

Answer 2

查看Bootstrap Components 页面以确保您使用的是正确的标记。导航栏中下拉菜单的标记如下：

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <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>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>

希望这会有所帮助。

编辑：

在您的 JS 代码中，"z-index":"1" 会将您的 z-index 设置为 1，更改这些值并查看是否有帮助。

编辑 2：

<div class="panel panel-default serachpanel" id="search" style="height:83%;position: fixed; overflow-y: scroll;z-index: -1;"> 中包含的所有内容都应该在z-index: -1; 这让我相信它很可能是<div class="col-sm-4" id="searchDiv"> div 导致了这个问题。为了更简单的测试范例，我建议使用 Google Chrome 中的 Inspect Element 编辑器，您应该测试该元素（以及所有后续元素）的每个 CSS 修饰符。如果这不起作用，请告诉我。

附带说明：上面代码中的serachpanel 应该是搜索面板，这是故意还是错字？