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

查看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应该是searchpanel，是故意还是拼写错误？

Answer 2

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

z-index属性指定定位元素的z顺序   它的后代。当元素重叠时，z顺序决定哪一个   涵盖了另一个。具有较大z指数的元素通常覆盖一个   较低的元素。

对于定位的框（即，除了之外的任何位置的框）   static），z-index属性指定：


当前堆叠上下文中框的堆栈级别。

框是否建立了本地堆叠上下文。

请参阅：https://developer.mozilla.org/en/docs/Web/CSS/z-index

您可以尝试添加位置：相对于您的选择器。它可能不适合你的情况，但正如我所说，没有一些实际的代码，我的猜测是好的。

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

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

2 个答案: