Question

我在如何使覆盖层如我所愿方面遇到问题。问题是，当我单击“汉堡”按钮时，覆盖层覆盖了引导导航栏，甚至覆盖了滑动菜单。我想要的是，覆盖层仅影响HTML正文，不包括导航栏和侧边栏。此外，我想通过相同的按钮禁用覆盖，但是我也不知道该如何管理。任何帮助。代码在下面。

function on() {
    document.getElementById("overlay").style.display = "block";
}

function off() {
    document.getElementById("overlay").style.display = "none";
}

//mobile menu slide from the left
$('[data-toggle="slide-collapse"]').on('click', function() {
    $navMenuCont = $($(this).data('target'));
    $navMenuCont.animate({'width':'toggle'}, 350);
});

#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    cursor: pointer;
}

<body>

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="pull-left navbar-toggle" data-toggle="slide-collapse" data-target="#myNavbar" onclick="on()" onclick="off()">
         <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#myPage">HOME</a></li>
        <li><a href="#band">BAND</a></li>
        <li><a href="#tour">TOUR</a></li>
        <li><a href="#contact">CONTACT</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
          <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Merchandise</a></li>
            <li><a href="#">Extras</a></li>
            <li><a href="#">Media</a></li> 
          </ul>
        </li>
        <li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#myPage">HOME</a></li>
        <li><a href="#band">BAND</a></li>
        <li><a href="#tour">TOUR</a></li>
        <li><a href="#contact">CONTACT</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
          <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Merchandise</a></li>
            <li><a href="#">Extras</a></li>
            <li><a href="#">Media</a></li> 
          </ul>
        </li>
        <li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
      </ul>
</div>
    
<div id="overlay"></div>
    
</body>

Answer 1

您没有为导航栏创建stacking context。

堆叠上下文由文档中的任何元素组成   在以下情况下：


位置值为“绝对”或“相对”的元素，以及   z-index值（不是“ auto”）。

您需要添加：

navbar {
  z-index: 5;
}

#myNavbar {
  z-index: 5;
  position: relative;
}

这将使它们相对于主体和覆盖物以及您所拥有的其他任何东西堆叠。您也可以在DOM中将叠加层移动到它们之上，只是我想从语义上（？）它将叠加在导航栏之前。但这可能不是必需的。

单击汉堡按钮并通过同一按钮禁用它时覆盖

1 个答案: