Stu*_*low 3 html css z-index twitter-bootstrap twitter-bootstrap-3
A position:fixed div covers the entire page (except for elements with higher z-indexes, like the <a></a> elements).
Or at least, that is unless you click the navbar brand name, which I set to z-index: 9999; while the entire page div is z-index:9994.
Once the position:fixed div is clicked, it closes the dropdown menu.
The position:fixed div only appears when the dropdown menu is open. It's class name is .blackout and it's container name is .labelBlackout.
You can make .labelBlackout appear by clicking the "Solutions" dropdown. Here is the fiddle: https://jsfiddle.net/tsb3zthn/
How can I make the navbar brand name clickable while the position:fixeddiv is active?
Thank you so much! <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/