javascript - 如何将汉堡包菜单移到覆盖菜单的前面

如何在将汉堡包菜单从移动设备移动到桌面的同时，将其移动到覆盖菜单的前面？这是关于codepen的示例

这是我的下面的代码

的HTML

<nav>
      <button class="hamburger hamburger--squeeze" type="button">
        <span class="hamburger-box">
         <span class="hamburger-inner"></span>
        </span>
      </button>

     <div class="overlay">
        some list elements go here
     </div>
</nav>

的CSS

.overlay{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: transparentize($darkest-grey,0.01);
  overflow: auto;
  z-index: 99;
  text-align: center;
  padding-top: 100px;

li{
    list-style: none;
  }
}

.is-active{
    display: block;
}

的JavaScript

 <script>
      var hamburger = document.querySelector(".hamburger");
      var overlayMenu = document.querySelector(".overlay");
      hamburger.addEventListener("click", function() {
        hamburger.classList.toggle("is-active");
        overlayMenu.classList.toggle("is-active");
      });
 </script>

另外，我正在使用Bourbon neat和Hamburgers。如果有更优雅的方法，请告诉我:)谢谢！

最佳答案

您需要更高的z-index。


  请记住，z-index仅适用于定位的元素，您需要更改按钮的默认静态位置。

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,.3);
  overflow: auto;
  z-index: 99;
  text-align: center;
  padding-top: 100px;
}

.is-active {
  display: block;
  position:relative;
  z-index:100;
}

<nav>
  <button class="hamburger hamburger--squeeze is-active" type="button">
    <span class="hamburger-box">
         <span class="hamburger-inner">button</span>
    </span>
  </button>

  <div class="overlay">
    some list elements go here
  </div>
</nav>