我在导航栏中有一个下拉菜单。在其下方(导航栏下方)有一个位置固定的 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>
............
最佳答案
如果没有实际代码,真的很难说出问题所在。从您发布的 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;
}
关于html - 导航栏中的下拉菜单保持在所有固定元素之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43054490/