html - 调整 SideBar 的位置，使其位于 NavBar 固定顶部的 "front"

Question

我的导航栏位于我的侧边栏之上。我需要的是侧边栏“覆盖”导航栏，这样当侧边栏消失时，导航栏就会可见。

由于侧边栏会折叠，因此发生这种情况时需要出现导航栏。就目前的情况而言，侧边栏看起来像是被切掉了，最终在侧边栏中失去了一个空间

侧边栏/导航栏图像:

<nav class="navbar navbar-light fixed-top  flex-md-nowrap p-0 shadow">
        <a class="navbar-brand   " href="#"> </a>
        <img src="~/Content/img/Principal_h_cor_RGB.png" alt="Logo" style="width:150px;">
        <ul class="navbar-nav px-3">
            <li class="nav-item text-nowrap">

            </li>
        </ul>
    </nav>

<nav id="sidebar" class="sidebar-wrapper">
            <div class="sidebar-content">
                <div class="sidebar-brand text-center">
                    <a href="#"></a>
                    <div id="close-sidebar">
                        <i class="fas fa-times"></i>
                    </div>
                </div>
                <div class="sidebar-header text-center">
                    <h6 style="text-align:center"> 
                        <img src="~/Content/img/boat_block2.png " alt="Logo" style="width:70px;" />
                    </h6>                                       
                    <div class="user-info">
                        <span class="user-name">
                            <strong>@Html.Partial("_LoginPartial")</strong> 

                        </span>
                        <!-- <span class="user-role">Administrator</span> -->
                        <span class="user-status">
                            <i class="fa fa-circle"></i>
                            <span>Online</span>
                        </span>
                    </div>
                </div>


                        </div>
                    </div>
                </div>
   </nav>

 <script>
.sidebar-wrapper {
    width: 260px;
    height: 100%;
    max-height: 100%;
    position: fixed;
    top: 0;
    left: -300px;
    z-index: 999;
    padding-top: 45px;
}

    .sidebar-wrapper ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    .sidebar-wrapper a {
        text-decoration: none;
    }

Answer 1

只需将固定顶的Z-Index改为10

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10;
}