Проблемы с Z-индексом/расслоением

Question

z-index, похоже, не работает для меня. Я googled, но не могу найти проблему.

Я хочу, чтобы класс .navigation css имел более низкий z-индекс, чем класс css .mobilenav и .mobilenavclosed, чтобы эти классы были расположены поверх другого.

Как это сделать? Я попытался изменить положение элементов и изменить индекс z, но ничего не работает.

Спасибо!

Это мой HTML

<div class="navWrapper" ng-controller="NavController"> 
<section class="navigation"> 
    <div class="nav-container"> 
     <button ng-click="openHamburger()" class="hamburger"><span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span></button> 
     <nav> 
      <ul class="nav-list" ng-repeat="navitem in navitems"> 
       <li> 
        <a href="#!">{{navitem.title}}</a> 
       </li> 


      </ul> 
     </nav> 
    </div> 
</section> 

<div ng-class="{'mobilenav': isOpen, 'mobilenavclose': isClosed}"> 
    <button ng-click="closeHamburger()" type="button" class="btn btn-default"> 
     <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 
    </button> 
    <div class="menuwrapper"> 
     <button class="optionwrapper" ng-repeat="navitem in navitems"> 
      <div class="navicon"></div> 
      <p>{{navitem.title}}<p> 
     </button> 
    </div> 
</div> 

Это мой CSS

@keyframes active { 
from { 
    border-bottom: 0px solid #5aaafa; 
} 
to { 
    border-bottom: 5px solid #5aaafa; 
} 
} 

body, 
html { 
height: 100%; 
margin: 0 auto; 
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
color: red; 
} 

.menuwrapper { 
display: none; 
} 

button.btn.btn-default { 
display: none; 
} 

.navWrapper { 
height: 100vh; 
width: 100vw; 
} 

.activeindicator { 
width: 100%; 
height: 10%; 
background: #5aaafa; 
} 

.hamburger { 
display: none; 
    } 

.close { 
display: none !important; 
} 

    .navhidden { 
display: none !important; 
} 

.navigation { 
width: 100%; 
height: 50px; 
background: #333; 
color: white; 
position: relative; 
z-index: 1; 
} 

.navigation a { 
color: white; 
text-decoration: none; 
font-weight: 300; 
} 

    .navigation a:hover { 
    color: #ffffff; 
    text-decoration: none; 
    border-bottom: 5px solid #5aaafa; 
    } 

.nav-container { 
margin: 0 auto; 
padding: 0px 0px; 
height: 100%; 
position: relative; 
} 

nav { 
display: inline-block; 
font-size: .9em; 
text-transform: uppercase; 
font-weight: 700; 
height: 100%; 
position: absolute; 
left: 23vw; 
right: 23vw; 
} 

nav ul { 
list-style: none; 
text-align: left; 
margin: 0; 
padding: 0px; 
height: 100%; 
display: inline-block; 
} 

nav ul li { 
float: none; 
height: 100%; 
} 

nav ul li a { 
display: block; 
color: #a9a9a9; 
padding: 0 20px; 
background: #333; 
height: 100%; 
padding-top: 17px; 
} 

nav ul li a:hover, 
nav ul li a:focus, 
nav ul li a:active { 
text-decoration: none; 
color: #ffffff; 
border-bottom: 5px solid #5aaafa; 
animation: active; 
animation-duration: 0.2s; 
animation-timing-function: linear; 
} 

nav ul li > a:hover { 
color: #ffffff; 
} 

nav ul li > a:not(:only-child):after { 
padding-left: 4px; 
content: ' ▾'; 
} 


/* Mobile navigation */ 

.nav-mobile { 
display: none; 
position: absolute; 
top: 0; 
right: 0; 
background: #262626; 
height: 100%; 
width: 70px; 
} 

@media only screen and (max-width: 1389px) { 
nav { 
    left: 20vw; 
    right: 20vw; 
} 
} 

@media only screen and (max-width: 1250px) { 
nav { 
    left: 17vw; 
    right: 17vw; 
} 
} 

@media only screen and (max-width: 1172px) { 
nav { 
    left: 15vw; 
    right: 15vw; 
} 
} 

@media only screen and (max-width: 1075px) { 
nav { 
    left: 12vw; 
    right: 12vw; 
    } 
} 

//*IPAD VIEW 
@media only screen and (max-width: 1000px) { 
@keyframes openHamburger { 
    from { 
     width: 0vw; 
    } 
    to { 
     width: 40vw; 
    } 
} 
@keyframes closeHamburger { 
    from { 
     width: 40vw; 
    } 
    to { 
     width: 0vw; 
    } 
} 
nav ul, 
nav li, 
nav a { 
    display: none; 
} 
.hamburger { 
    display: inline; 
    background: none; 
    border: 0px; 
    height: 100%; 
    width: 8%; 
    padding: 0px; 
} 
.mobilenav.mobilenavclose { 
    height: 100vh; 
    background: #5aaafa; 
    width: 0vw; 
    margin: 0px; 
    animation: closeHamburger; 
    animation-duration: 0.7s; 
    position: relative; 
    z-index: 10; 
} 

.menuwrapper { 
    height: 32vw; 
    width: 33vw; 
    display: block; 
    position: inherit; 
    padding: 0px; 
    margin:0 auto; 
     top: 32vh; 
} 
.mobilenav { 
    height: 100vh; 
    background: #5aaafa; 
    width: 40vw; 
    margin: 0px; 
    animation: openHamburger; 
    animation-duration: 0.7s; 
    position: relative; 
    z-index: 10; 
} 

.navicon { 
    height: 7vw; 
    width: 7vw; 
    border: 2px solid white; 
    border-radius: 17vw; 
    margin: auto; 
} 
.optionwrapper { 
    text-align: center; 
    display: table-cell; 
    background: none; 
    border: none; 
    height: 11vw; 
    width: 11vw; 
    p { 
     color: white; 
     margin: 0px; 
     padding-top: 5%; 
     text-transform: uppercase; 
     font-size: 0.7em; 
    } 
} 
button.btn.btn-default { 
    display: inline !important; 
    background: none; 
    border: 0px; 
    top: 2%; 
    right: 5%; 
    position: absolute; 
    color: white; 
    font-size: 20px; 
} 
} 

//*MOBILE VIEW 
@media only screen and (max-width: 600px) { 
@keyframes openHamburger { 
    from { 
     width: 0vw; 
    } 
    to { 
     width: 90vw; 
    } 
} 
@keyframes closeHamburger { 
    from { 
     width: 90vw; 
    } 
    to { 
     width: 0vw; 
    } 
} 
.mobilenav.mobilenavclose { 
    height: 100vh; 
    background: #5aaafa; 
    width: 0vw; 
    margin: 0px; 
    animation: closeHamburger; 
    animation-duration: 0.7s; 
    position: relative; 
} 
.mobilenav { 
    height: 100vh; 
    background: #5aaafa; 
    width: 90vw; 
    margin: 0px; 
    animation: openHamburger; 
    animation-duration: 0.7s; 
    position: relative; 
    } 

    .menuwrapper { 
    height: 78vw; 
    width: 72vw; 
    display: block; 
    position: inherit; 
    padding: 0px; 
    margin:0 auto; 
     top: 24vh; 
    } 


    .optionwrapper { 
    text-align: center; 
    display: table-cell; 
    background: none; 
    border: none; 
    height: 26vw; 
    width: 24vw; 
    p { 
     color: white; 
     margin: 0px; 
     padding-top: 10%; 
     text-transform: uppercase; 
     font-size: 0.8em; 
    } 
} 

    .navicon { 
    height: 17vw; 
    width: 17vw; 
    border: 2px solid white; 
    border-radius: 17vw; 
    margin: auto; 
} 
} 

Answer 1

, если вы хотите, чтобы быть многоуровневыми, ваш нижний слой должен быть относительным, но и .mobilenav .mobilenavclosed должно быть положение: абсолютное; ? По крайней мере, так я делаю это.

.mobilenav.mobilenavclose { 
    height: 100vh; 
    background: #5aaafa; 
    width: 0vw; 
    margin: 0px; 
    animation: closeHamburger; 
    animation-duration: 0.7s; 
    position: absolute; 
    z-index: 10; 
} 

также .навигация не нуждается в индексе z, так как это слишком низкое?