<分区>
<分区>
我设计了一个移动菜单，我已经将 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>最佳答案
您需要将 position 属性添加到您的元素中，z index 才能正常工作
例如将 position: relative; 添加到 .nav-list 然后添加你的 z-index 应该显示元素在其他元素之上。
关于html - Z-index 不生效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36138888/