Отрегулируйте положение боковой панели так, чтобы она находилась «спереди» от NavBar с фиксированным верхом

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-индекс фиксированной вершины на 10

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