一个position:fixed div 覆盖整个页面(除了 z 索引较高的元素，例如 <a></a> 元素)。
或者至少，除非您单击导航栏品牌名称，我将其设置为 z-index: 9999;而整个页面的div是z-index:9994 。
一旦position:fixed单击 div，它会关闭下拉菜单。
position:fixed div 仅在下拉菜单打开时出现。它的类名是.blackout它的容器名称是 .labelBlackout .
您可以通过单击“解决方案”下拉列表来显示 .labelBlackout。 这是 fiddle :https://jsfiddle.net/tsb3zthn/
如何使导航栏品牌名称可点击，而 position:fixed div 是否处于事件状态？
非常感谢! <3
<style>
/* THIS IS WHERE THE DROPDOWN MENU CODE STARTS */
.buttoncontainer1 { /*A wrapper for your hover dropdown List*/
height:49px;
float:left;
position:relative;
z-index:9995;
}
.mycheckButton { /*Your Label acts as a Button Triggering the checkbox*/
height:49px;
float:left;
display:block;
background-color:#f8f8f8;
text-align:center;
color:#777;
position:relative;
z-index:9995;
cursor:pointer;
}
.mycheckDrop { /*Your Dropdown*/
width:88px;
float:left;
display:none;
background-color:#f8f8f8;
position:fixed;
z-index:9996;
margin-top:50px;
}
.gone { /*Make your checkbox disappear*/
border:0px;
outline:none;
line-height:0;
display:none;
margin:0px;
padding:0px;
width:0px;
height:0px;
}
.blackout { /*This Div covers the page with the labelBlackout Label in it. nothing can be clicked unless The Label inside clicked first triggering the checkbox. */
width:100%;
height:100%;
right:0;
left:0;
top:0;
bottom:0;
float:left;
position:fixed;
background-color:black; opacity:0.7; /* You can add a background color like this. background-color:black; opacity:0.7;*/
display:none;
z-index: 9994;
}
.labelBlackout { /*the Label inside the blackout div that covers the page*/
width:100%;
height:100%;
float:left;
z-index: 9994
}
.lnkCon { /* Container that holds your dropdown links.*/
width:100%;
height:49px;
float:left;
}
label {
font-weight: 400;
}
input[type=checkbox].gone:checked ~ div.blackout{display:block;}
input[type=checkbox].gone:checked ~ label.mycheckDrop{display:block;}
.buttoncontainer1:hover > .mycheckDrop{display:block;}
a {
cursor: pointer;
z-index: 9999;
}
.buttoncontainer1{cursor:pointer;}
input{cursor:pointer;}
.navbar-brand {
z-index: 9999;
}
.navbar-header {
z-index: 9999;
}
div.navbar-brand {
z-index: 9999;
}
div.navbar-header {
z-index: 9999;
}
</style>
<body>
<div class="navbar-header">
<label type="button" for="navbar-toggle-cbox" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</label>
<a class="navbar-brand" href="#">MiracleShack</a></div>
<div id="navbar" class="navbar-collapse collapse center">
<ul class="nav navbar-nav topnav navbar-right">
<li class="active"><a href="#">Home</a></li>
<div class="buttoncontainer1">
<input class="gone" id="myCheck" type="checkbox" >
<div class="blackout" >
<label class="labelBlackout" for="myCheck"></label></div>
<label class="mycheckButton" for="myCheck">Solutions</label>
<label class="mycheckDrop" for="myCheck">
<span class="lnkCon"><a href="#">Button 1</a></span>
<span class="lnkCon"><a href="#">Button 2</a></span>
<span class="lnkCon"><a href="#">button 3</a></span>
</label>
</div>
<li class=""><a href="#">About</a></li>
<li class=""><a href="#">Contact</a></li>
</ul>
</div>
<!--/.nav-collapse -->
最佳答案
将 position:relative; 添加到您的 .navbar-brand 类
z-index 仅适用于定位元素。如果您尝试在未指定位置的元素上设置 z-index，它将不会执行任何操作
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
关于html - Bootstrap - 为什么 z-index 较低的 div 会覆盖 z-index 较高的 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47245691/