Z-index 不生效

Question

我设计了一个移动菜单，我已经将 z-index 应用于下拉移动菜单，但其他元素仍然显示在它上面。我试过将 z-index 放在这两个元素中：

.nav_list {}
.nav_list > a {}

请注意，您必须小于 640 像素才能看到该按钮。然后当你按下它时，你会看到 "Hello" 这个词出现在菜单上。

我做错了什么？

$('span.nav-btn').click(function () {
  $('ul.nav_list').slideToggle(500);
 })
 $(window).resize(function (){
  if ( $(window).width() > 640 ) {
   $('ul.nav_list').removeAttr('style');
  }
 });

body {
  padding: 0;
  margin: 0;
  max-width: 100%;
    background: green;
 }
.header {
  margin: 0;
  background-color: #333;
  height: 80px;
}

.header_wrap {
  /*margin: 0 15%;*/
  width: 960px;
  text-align: center;
}
.nav-btn {
  display: none;
}
.nav_list {
  text-decoration: none;
  background-color: #333;
  color: #FFF;
  margin: 0;
  list-style: none;
  width: 100%;
}

.nav_list > a {
  display: inline-block;
  padding: 25px 12px;
  text-decoration: none;
}

.nav_list > a > li {
  text-decoration: none;
  font-size: 1em;
  color: #FFF;
}


@media screen and (max-width:640px) {
  body {
   background: blue;
  }
  .header_wrap {
   margin: 0%;
      width: 100%;
  }
  .nav_list {
   padding: 0;
   text-align: center;
   display: none;
   margin-top: 60px;
   width: 100%;
  }
  .nav_list > a {
   display: block;
   border-bottom: 1px solid #FFF;
   width: auto;
  }
  .nav-btn {
   display: block;
   background-color: #333;
   color: #FFF;
   font-size: 1.5em;
   /*text-align: right;*/
   cursor: pointer;
   padding-top: 20px;
  }
  .nav-btn:before {
   background-image: url('http://optimumwebdesigns.com/icons/mobile_menu_white.png');
   background-size: 28px 28px;
   background-repeat: no-repeat;
   width: 28px;
   height: 28px;
   content:"";
   display: block;
   float: right;
  }
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header class="header">
  <div class="header_wrap">
  <span class="nav-btn"></span>
    <ul class="nav_list">
      <a href="index.html"><li>Home</li></a>
      <a href="Spray-Foam-Insulation-Material-Suppliers.html"><li>Spray Foam Insulation</li></a>
      <a href="Portable-Spray-Foam-Kits.html"><li>Portable Spray Foam Kits</li></a>
      <a href="Polyurea.html"><li>Polyurea</li></a>
      <a href="Personal-protective-equipment.html"><li>Personal Protective Equipment</li></a>
      <a href="Spray-Foam-Equipment-Financing.html"><li>Financing</li></a>
      <a href="Contact-us.html"><li>Contact us</li></a>
    </ul>
 </div>
</header>
<p>
Hello
</p>

Answer 1

您需要将 position 属性添加到您的元素中，z index 才能正常工作

所以例如将 position: relative; 添加到 .nav-list 然后添加你的 z-index 应该显示元素在其他元素之上。

Answer 2

将 position:absolute; 或 position:relative; 添加到 .nav_list {}。否则，z-index 将不起作用。

Z-index 不生效

Z-index not taking effect

html

css

z-index