0
Ich entwarf ein mobiles Menü und ich habe eine z-index auf das Drop-Down-Handy-Menü angewendet, aber andere Elemente zeigen immer noch darüber. Ich habe versucht, die z-index in diesen beiden Elementen setzen:Z-Index nicht wirksam
.nav_list {}
.nav_list > a {}
Bitte beachten Sie müssen unter 640px sein, um die Taste zu sehen. Wenn Sie es dann drücken, wird das Wort "Hallo" über dem Menü angezeigt.
Was mache ich falsch?
$('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>
Ich konnte das Problem hier nicht reproduzieren, aber auf den ersten Blick scheint es mir, dass Sie vergessen haben, Ihre Positionierung zu etwas nicht statisch zu ändern. Versuchsposition: relativ zu den genannten Elementen. – rcpinto