Z-index 弄乱了导航栏 CSS

Question

我对固定导航栏菜单上的 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>

Answer 1

z-index 越高，内容就越高。当导航栏在内容后面时，给她一个更高的 z-index。