Z指数未生效

Question

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

.nav_list {}
.nav_list > a {}

请注意，您必须在640px以下才能看到按钮。然后当你按它时，你会看到＆＃34; Hello＆＃34;出现在菜单上。

我做错了什么？

＆＃13;

＆＃13;

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

＆＃13;

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;
		}
	}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要将position属性添加到元素以使z index工作 例如，添加位置：相对;到.nav-list然后添加你的z-index应该显示其他元素。

Answer 2

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