0
我設計了一個手機菜單，我已經將z-index應用到下拉菜單中，但其他元素仍然顯示在屏幕上。我試圖把在這兩個元素的z-index：Z-index沒有生效
.nav_list {}
.nav_list > a {}
請注意，您必須爲640px下才能看到的按鈕。然後當你按下它時，你會在菜單上看到「你好」字樣。
我在做什麼錯？
$('span.nav-btn').click(function() {
\t \t $('ul.nav_list').slideToggle(500);
\t })
\t $(window).resize(function(){
\t \t if ($(window).width() > 640) {
\t \t \t $('ul.nav_list').removeAttr('style');
\t \t }
\t });body {
\t \t padding: 0;
\t \t margin: 0;
\t \t max-width: 100%;
background: green;
\t }
.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) {
\t \t body {
\t \t \t background: blue;
\t \t }
\t \t .header_wrap {
\t \t \t margin: 0%;
width: 100%;
\t \t }
\t \t .nav_list {
\t \t \t padding: 0;
\t \t \t text-align: center;
\t \t \t display: none;
\t \t \t margin-top: 60px;
\t \t \t width: 100%;
\t \t }
\t \t .nav_list > a {
\t \t \t display: block;
\t \t \t border-bottom: 1px solid #FFF;
\t \t \t width: auto;
\t \t }
\t \t .nav-btn {
\t \t \t display: block;
\t \t \t background-color: #333;
\t \t \t color: #FFF;
\t \t \t font-size: 1.5em;
\t \t \t /*text-align: right;*/
\t \t \t cursor: pointer;
\t \t \t padding-top: 20px;
\t \t }
\t \t .nav-btn:before {
\t \t \t background-image: url('http://optimumwebdesigns.com/icons/mobile_menu_white.png');
\t \t \t background-size: 28px 28px;
\t \t \t background-repeat: no-repeat;
\t \t \t width: 28px;
\t \t \t height: 28px;
\t \t \t content:"";
\t \t \t display: block;
\t \t \t float: right;
\t \t }
\t }<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>
我不能在這裏重現這個問題，但乍一看，在我看來，你忘了把你的位置改變成非靜態的東西。嘗試位置：相對於上述元素。 – rcpinto