我在固定的导航栏菜单上的z索引有问题。当我将位置固定在标题和汉堡包图标上时,汉堡包图标将消失在导航栏后面。当没有z-index时,导航栏就可以了,但是当我滚动时,它似乎落后于主要内容。我有照片。我真的不知道该怎么办。
.header-container {
position: fixed;
top: 0px;
width: 100%;
background-color: #fff;
margin: auto !important;
/* z-index: 2;*/
}
label i {
position: fixed;
top: 15px;
cursor: pointer;
color: #888 !important;
/* z-index: 3;*/
}
<input type="checkbox" id="menu-toggle" class="menu-icon" />
<label for="menu-toggle" class="menu-icon"><i class="fa fa-bars mt-2"></i></label>
<div class="container-content">
<header>
<div class="header-container pb-3 pb-lg-0 pb-mg-0 d-flex justify-content-between">
<div class="slideout-sidebar order-1">
<ul class="d-md-flex flex-md-column flex-lg-row mt-md-4">
<li class="brd mr-md-4 align-self-center menu">МЕНИ</li>
<li class=" order-lg-last btn-order"> <button class="btn" type="submit">НАРАЧАЈТЕ ВЕДНАШ</button></li>
<li class="brd border-bottom border-top border-primary d-none ">КОНТАКТИРАЈТЕ НЕ</li>
<li class="brd d-none">УСЛОВИ ЗА КОРИСТЕЊЕ</li>
<li class=" border-bottom border-primary d-none brd">РЕСТОРАНИ</li>
<li class="order-lg-first mr-md-4 text-center brd align-self-center">
<a class="">МК</a>
<div class="d-inline-block
language-line"> | </div>
<a class="">EN</a>
</li>
</ul>
</div>
<div class="mx-auto mx-lg-0 mt-2">
<img src="./images/logo.png" alt="dominoslogo" class="navbar-brand" />
</div>
<div class="cart mt-2">
<i class="fas fa-shopping-basket header-cart d-lg-none"></i>
<span class="header-cart-order d-lg-none">0</span>
</div>
</div>
</header>
z索引越高,内容越高。当导航栏位于内容后面时,给她更高的z索引。