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更改为高于其余部分，它也不会高于上面，我似乎无法弄清楚< / p>

我的想法是我有一个带有白色菜单图标的蓝色导航栏，当点击图标时，div将覆盖带有新导航的页面+白色图标（navbarContentHamburger）仍在角落里。

<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无法访问父目录中的图像。尝试指定汉堡包图标图像文件的绝对路径。这是一个例子：

＆＃13;

#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);
}

＆＃13;

<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>

＆＃13;

较高的z-index不会出现在元素上方

1 个答案: