Question

position:fixed div覆盖整个页面（具有更高z索引的元素除外，如<a></a>元素）。

或者至少，除非您点击导航栏品牌名称，我将其设置为z-index: 9999;，而整个页面div为z-index:9994。

点击position:fixed div后，它会关闭下拉菜单。

仅在下拉菜单打开时显示position:fixed div。它的类名是.blackout，它的容器名是.labelBlackout。

单击“解决方案”下拉列表，可以显示.labelBlackout。这是小提琴：https://jsfiddle.net/tsb3zthn/

如果在position:fixed div处于活动状态时，如何使导航栏品牌名称可以点击？

非常感谢你！＆LT; 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 -->

Answer 1

将position: relative;添加到.navbar品牌类

z-index仅适用于定位元素。如果您尝试在未指定位置的元素上设置z-index，则它将不执行任何操作

https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Answer 2

缺少一个css规则来达到你想要的，你必须添加：

.navbar-header {
    z-index: 9999;
    position: relative;
}

因为@jndoy提到 z-index仅适用于定位元素。

检查更新后的JSfiddle。

希望这会有所帮助：）

Bootstrap - 为什么具有较低z-index的div覆盖较高的？

2 个答案: