html - 更高的 z-index 没有出现在元素上方

Question

#navbarContentHamburger {
    background-image: url(../img/657904-64.png);
    background-size: contain;
    z-index: 3;
    position: fixed;
    width: 22px;
    height: 20px;
    top: 7.7px;
    left:8px;
}

.open {
    width: 4% !important;
    transition: 0.4s;
    z-index: 2;
}

#sidebar {
    transition: 0.4s;
position: fixed;
    height: 100%;
    width: 0%;
    background: red;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    overflow: hidden;
}

#navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
    background-color: #0f9494;
    grid-area: navbar;
  box-shadow: 0 3px 28px rgba(0,0,0,0.25), 0 2px 10px rgba(0,0,0,0.22);
}

我需要这个 HTML 元素 navbarContentHamburger 出现在“.open”和#sidebar 上方，即使我将 z-index 更改为高于其余部分，它也根本不会超过，我似乎无法弄清楚

我的想法是我有一个带有白色菜单图标的蓝色导航栏，单击该图标时，一个 div 将覆盖页面，新导航 + 白色图标 (navbarContentHamburger) 仍在 Angular 落。

<div id="navbar">
    <div class="navcontainer">
        <div id="navbarContent">
            <div id="navbarContentHamburger" @click="toggleMenu()">

            </div>
            <div id="navbarContentMenu">
                    <h4>MENU</h4>
            </div>
        </div>
    </div>
</div>

Answer 1

您所做的一切都是正确的，但是您的 CSS 无法访问父目录中的图像。尝试为您的汉堡包图标图像文件指定一个绝对路径。这是一个例子:

#navbarContentHamburger {
    background-image: url(https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-256.png);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 3;
    position: fixed;
    width: 22px;
    height: 20px;
    top: 20px;
    right: 20px
}

.open {
    width: 4% !important;
    transition: 0.4s;
    z-index: 2;
}

#sidebar {
    transition: 0.4s;
    position: fixed;
    height: 100%;
    width: 0%;
    background: red;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    overflow: hidden;
}

#navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
    background-color: #0f9494;
    grid-area: navbar;
    box-shadow: 0 3px 28px rgba(0,0,0,0.25), 0 2px 10px rgba(0,0,0,0.22);
}

<div id="navbar">
    <div class="navcontainer">
        <div id="navbarContent">
            <div id="navbarContentHamburger" @click="toggleMenu()">

            </div>
            <div id="navbarContentMenu">
                    <h4>MENU</h4>
            </div>
        </div>
    </div>
</div>