Z-index/layering issues - html

Question

z-index doesn't seem to work for me. I've googled but can't seem to find the problem.
I want the .navigation css class to have a lower z-index than the css class .mobilenav and .mobilenavclosed so that these classes are layered above the other.
How can I accomplish this? I have tried both changing the position of the elements and changing the z- index but nothing seems to work.
Thank you!
This is my 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>
{{navitem.title}}
</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>
This is my 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

if you want them to be layered, your bottom layer needs to be relative, but .mobilenav and .mobilenavclosed should be position: absolute; ? At least that's how the layering I do is done.
.mobilenav.mobilenavclose {
height: 100vh;
background: #5aaafa;
width: 0vw;
margin: 0px;
animation: closeHamburger;
animation-duration: 0.7s;
position: absolute;
z-index: 10;
}
as well .navigation shouldn't need a z index since it is too be the bottom?