Hamburger menu shows under content

Question

My problem is that when hamburger menu overlaps content.
I maybe still not understand it.. Content should have set lower z-index than hamburger-menu and it is above him?
Screenshot: Gyazo


I tried change any z-index's but it didn't work as well.
I'll be really glad if you help me with this.
Thanks.

---

Code (MENU):

/* MENU */
ul {    list-style-type: none;
position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
padding: 0;
overflow: hidden;font-size: 220%;font-family: menu
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 23px;
text-decoration: none;
}

li a:hover {
background-color: #111111;
}


.vyber {position: absolute;background-color: #A4202B;background-size:    100%;width: 100%;height: 100px; margin-top: 350px;    -webkit-animation-name:    example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: vysunuti;
animation-duration: 0.8s;box-shadow: 
    inset 0px 11px 10px -10px #000,
    inset 0px -11px 10px -10px #000; margin-bottom: 200px;}


.hamburger {visibility: hidden ; }
.hamburger-box {margin-top: 25px; }

@media screen and (max-width: 1246px) {
ul li {font-size: 75%}
}
@media screen and (min-width: 1001px) {
.collapse {display: block !important; }
}
@media screen and (max-width: 1000px) {

div.navbar-header ul  {top: 293px;z-index: 99 !important}
ul li {;background-color: #191919;display: block;text-align: center;width:     100%;padding-bottom: auto !important}
li {margin-top: -1px}
.hamburger {visibility: visible}
.hamburger-box { -webkit-animation: hamburger 0.5s ease-in-out;  animation:     hamburger 0.5s ease-in-out;}

}
@-webkit-keyframes hamburger {
from {opacity: 0}
to {opacity: 1}
}

---

CODE (CONTENT):

.content {font-family: text;font-weight: 400;padding-bottom:400px;height:     auto !important;position: relative;
margin-bottom: 450px;width: 100%}
div.row.content {z-index: 3}
p {color: whitesmoke;display: inline-block;padding-left: 10px;padding-right:     30px;font-size: 1.3em;}
p.side-arrow {padding-right: 30px}
h1 {color: rgba(164, 32, 43, 0.9) !important ;border-radius: 5px;padding:     5px;padding-left: 10px;display: inline-block !important;padding-right:     30px;font-family: mt !important;font-size: 3.8em !important;}

.nice-form * {
box-sizing: border-box;
}
.nice-form .fieldset {
padding: 3em 1em 1em 1.5em;
margin: 1em;
border: 1px solid #A4202B;
border-radius: 7px
}
.nice-form .legend {position: absolute;top: -10px;line-height: 50px;left: auto;right: auto;text-align: center;background: #1c1c1c;color: white;padding: 0 1em;font-size: 1.4em;font-weight: 100
}

@media screen and (min-width: 40em) {
.nice-form {
width: 40em;
margin: auto;
}
}

.obsah {width: 100%;height: 73%;background-color: #1c1c1c;bottom:     400px;position: absolute;z-index: 1}

Answer 1

z-index is resolved by comparing values relative to the closest ancestor that has a z-index. See here for a comprehensive look at z-index.

Because of this, setting a z-index on div.navbar-header ul won't be compared with div.row.content because the div.navbar-header ul has an ancestor with a z-index set: .backgroundheader. And .backgroundheader only has a z-index of 2, so it's going to fall behind div.row.content, which has a z-index of 3.

In this case, if you set .backgroundheader to 3 or higher, your menu will sit atop your content.

However, in general it's good to minimize the use of z-index because it can lead to complications like this where it's difficult to track down the origin of the problem. This is a relatively simple layout and you could accomplish this without setting a z-index except for the absolutely-positioned menu.