Question

我的问题是，当汉堡包菜单重叠内容时。
我可能仍然不理解..内容应该设置比汉堡菜单更低的z-index并且它高于他？
屏幕截图：Gyazo

我尝试改变任何z-index，但它也不起作用。
如果你帮助我，我会很高兴的 感谢。

代码（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}
}

代码（内容）：

.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：{{ 1}}。 .backgroundheader只有.backgroundheader的z索引，因此它会落后于2，其z索引为3.

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

然而，一般来说，最大限度地减少z-index的使用是有好处的，因为它可能导致这样的复杂情况，因为很难找到问题的根源。这是一个相对简单的布局，您可以在不设置z-index的情况下完成此操作，但绝对定位的菜单除外。

汉堡菜单显示在内容

1 个答案: