ハンバーガーメニューは内容の下に表示されます

Question

私の問題は、ハンバーガーメニューがコンテンツをオーバーラップするときです。
私はまだそれを理解していない可能性があります。コンテンツは、ハンバーガーメニューよりも低いz-インデックスを設定していて、彼は彼の上ですか？
スクリーンショット：Gyazo


私はZインデックスを変更しようとしましたが、うまくいきませんでした。
これで私を助けてくれたら本当にうれしいよ。
ありがとうございました。

---

コード（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 {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屈折率は、に相対値を比較することによって解決されますz-インデックスを持つ最も近い祖先。 See here for a comprehensive look at z-index。 div.navbar-header ulは、z屈折率が設定された祖先を有するのでdiv.navbar-header ul上z屈折率を設定する。このため

は、div.row.contentと比較されません。.backgroundheader。そして.backgroundheaderは2のzインデックスを持っているので、あなたが、あなたのメニューが上に座って3以上に.backgroundheaderを設定している場合、この場合は3

のzインデックスを持つdiv.row.content、後ろに落ちるだろうあなたのコンテンツ。

しかし、一般に、問題の原因を突き止めるのが困難なこのような複雑な問題を引き起こす可能性があるため、z-indexの使用を最小限に抑えることは良いことです。これは比較的単純なレイアウトであり、絶対配置されたメニューを除いてZ-インデックスを設定することなくこれを達成することができます。