汉堡菜单显示在内容下方

Question

我的问题是当汉堡包菜单与内容重叠时。
我可能还是不明白。内容应该设置比汉堡包菜单更低的 z-index而且在他上面？
截图：Gyazo

我尝试更改任何 z-index，但效果不佳。
如果你能帮助我，我将非常高兴。
谢谢。

代码（菜单）：

/* 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}
}

代码（内容）：

.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 通过比较相对于具有 z-index 的最近祖先的值来解析。 See here for a comprehensive look at z-index.

因此，在 div.navbar-header ul 上设置 z-index 不会与 div.row.content 进行比较，因为 div.navbar-header ul 的祖先设置了 z-index：.backgroundheader。而 .backgroundheader 只有 2 的 z-index，所以它会落后于 div.row.content，后者的 z-index 为 3.

在这种情况下，如果您将 .backgroundheader 设置为 3 或更高，您的菜单将位于您的内容之上。

但是，一般来说，最好尽量减少使用 z-index，因为它会导致像这样的复杂情况，很难找到问题的根源。这是一个相对简单的布局，除了绝对定位的菜单外，您无需设置 z-index 即可完成此操作。

汉堡菜单显示在内容下方

Hamburger menu shows under content

html

css

menu

drop-down-menu

hamburger-menu