Question

我有一个带有汉堡包标志的div，由另一个div覆盖。我希望汉堡标志叠加在一切之上。所以我将z-index值应用到我认为合适的位置。然而，它不起作用。有谁能解释为什么？这是我下面的代码，请看一下。

codepen：

HTML：

html { 
    background: green;
    width: 100%;
    height:100%;
}
body {
    width: 100%;
    height:100%; 
    position: relative;
}
#photoCover {
    width:100%;
    height:100%;
    position: fixed;
    top: 0;
    left:0;
    background-color: rgba(0,0,0,0.6);
}
.menu {
    position: fixed;
    top: 0; right: 0;
    width: 100%;
    background-color: rgba(0,0,0,0);
    -webkit-backface-visibility: hidden;
}
.menu-trigger {
    position: fixed;
    top: 2%; right: 2%;
    display: block;
    width: 60px; height: 60px;
    cursor: pointer;
    background: red;
  z-index:3000;
}
.menu-trigger span {
    position: absolute;
    top: 50%; left: 0;
    display: block;
    width: 100%; height: 6px;
    margin-top: -2px;
    background-color: #fff;
    font-size: 0px;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
    z-index: 2000;
}
.menu-trigger span:before,
.menu-trigger span:after {
    position: absolute;
    left: 0;
    width: 100%; height: 100%;
    background: #fff;
    content: '';
}
.menu-trigger span:before {
    -webkit-transform: translateY(-270%);
    transform: translateY(-270%);
}
.menu-trigger span:after {
    -webkit-transform: translateY(270%);
    transform: translateY(270%);
}
#entryMenu {
    position: fixed;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background-color: rgba(0,0,0,0.9);
}

的CSS：

route-if = equal:${HTTP_X_FORWARDED_PROTO};http redirect-permanent:https://${HTTP_HOST}${REQUEST_URI}

Answer 1

通过在父级div中添加z-index，我在顶层获得了“汉堡包”。

#photoCover {
    (...)
    z-index:99;
}

我认为原因是，#photoCover和#entryMenu都是固定的并且在同一个地方，#entryMenu位于顶部，因为它最后添加

Answer 2

将z-index添加到包装器div

#photoCover {
    width:100%;
    height:100%;
    position: fixed;
    top: 0;
    left:0;
    background-color: rgba(0,0,0,0.6);
    z-index: 1;
}

Demo URL

Answer 3

为id = photoCover的

添加z-index: 1;。

z-index值不在元素上？

3 个答案: