为什么打开菜单时 z-index 不起作用？

Question

请指出错误。为什么打开菜单时不显示菜单按钮？单击汉堡后，该按钮仍保留在菜单下方。对于 spanы 我使用了 position: relative 和 z-index，但是结果是一样的。

单击时将过渡应用于 span 会不会有问题？

$(document).ready(function(){
 $('#nav-btn').click(function(){
    $('#menu').toggleClass('is-opened');
  $(this).toggleClass('open');
 });
});

.container {
 background-color: rgba(12, 20, 40, 0.24);
 min-height: 600px;
}
#nav-btn {
 width: 24px;
 height: 24px;
 position: relative;
 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -o-transform: rotate(0deg);
 transform: rotate(0deg);
 -webkit-transition: 0.5s ease-in-out;
 -moz-transition: 0.5s ease-in-out;
 -o-transition: 0.5s ease-in-out;
 transition: 0.5s ease-in-out;
 cursor: pointer;
}
#nav-btn span {
 display: block;
 position: relative;
 height: 3px;
 width: 100%;
 background: #fff;
 border-radius: 9px;
 opacity: 1;
 left: 0;
 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -o-transform: rotate(0deg);
 transform: rotate(0deg);
 -webkit-transition: 0.5s ease-in-out;
 -moz-transition: 0.5s ease-in-out;
 -o-transition: 0.5s ease-in-out;
 transition: 0.5s ease-in-out;
 z-index: 999;
}
#nav-btn span:nth-child(1) {
 top: 0px;
 -webkit-transform-origin: left center;
 -moz-transform-origin: left center;
 -o-transform-origin: left center;
 transform-origin: left center;
}
#nav-btn span:nth-child(2) {
 top: 7px;
 -webkit-transform-origin: left center;
 -moz-transform-origin: left center;
 -o-transform-origin: left center;
 transform-origin: left center;
}
#nav-btn span:nth-child(3) {
 top: 14px;
 width: 70%;
 -webkit-transform-origin: left center;
 -moz-transform-origin: left center;
 -o-transform-origin: left center;
 transform-origin: left center;
}
#nav-btn.open span:nth-child(1) {
 will-change: transform;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
 will-change: transform;
 top: 18px;
 width: 30px;
}
#nav-btn.open span:nth-child(2) {
 will-change: transform;
 -webkit-transform: rotate(30deg);
 -moz-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 will-change: transform;
 top: -3px;
 width: 30px;
}
#nav-btn.open span:nth-child(3) {
 width: 0%;
 opacity: 0;
}
#menu {
 background-color: black;
 width: 100px;
 height: auto;
 padding: 30px 30px;
 text-align: center;
 position: absolute;
 top: 0;
 left: -160px;
 margin-top: 0;
 transition: all 0.3s ease;
}
#menu.is-opened {
 background-color: black;
 width: 100px;
 height: auto;
 padding: 30px 30px;
 text-align: center;
 position: absolute;
 top: 0;
 left: 0px;
 margin-top: 0;
 transition: all 0.3s ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
 <div class="container">
  <div id="nav-btn">
   <span></span> <span></span> <span></span>
  </div>
  <div id="menu">
   123
  </div>
 </div>
</body>
</html>

Answer 1

我给了 z-index:10 #nav-btn 并且它起作用了

Answer 2

Z 索引工作得很好，因为 position: absolute; 你必须调整你的元素，而且当菜单打开时你需要更改 color。检查片段。

$(document).ready(function() {
  $('#nav-btn').click(function() {
    $('#menu').toggleClass('is-opened');
    $(this).toggleClass('open');
  });
});

.container {
  background-color: rgba(12, 20, 40, 0.24);
  min-height: 600px;
}

#nav-btn {
  width: 24px;
  height: 24px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
  z-index: 1;
}

#nav-btn span {
  display: block;
  position: relative;
  height: 3px;
  width: 100%;
  background: #fff;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  z-index: 999;
}

#nav-btn span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-btn span:nth-child(2) {
  top: 7px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-btn span:nth-child(3) {
  top: 14px;
  width: 70%;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-btn.open span:nth-child(1) {
  will-change: transform;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  will-change: transform;
  top: 18px;
  width: 30px;
}

#nav-btn.open span:nth-child(2) {
  will-change: transform;
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  will-change: transform;
  top: -3px;
  width: 30px;
}

#nav-btn.open span:nth-child(3) {
  width: 0%;
  opacity: 0;
}

#menu {
  background-color: black;
  width: 100px;
  height: auto;
  padding: 30px 30px;
  text-align: center;
  position: absolute;
  top: 0;
  left: -160px;
  margin-top: 0;
  transition: all 0.3s ease;
  color: #fff;
}

#menu.is-opened {
  background-color: black;
  width: 100px;
  height: auto;
  padding: 30px 30px;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0px;
  margin-top: 0;
  transition: all 0.3s ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <div class="container">
    <div id="nav-btn">
      <span></span> <span></span> <span></span>
    </div>
    <div id="menu">
      123
    </div>
  </div>
</body>

</html>

为什么打开菜单时 z-index 不起作用？

Why doesn't z-index work when opening the menu?

html

css

z-index