html - 导航栏中的下拉菜单保持在所有固定元素之上

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 仅适用于定位元素(即具有非静态位置的元素)及其后代。

The z-index property specifies the z-order of a positioned element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.

For a positioned box (that is, one with any position other than static), the z-index property specifies:

• The stack level of the box in the current stacking context.
• Whether the box establishes a local stacking context.

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

---

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

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