Я сделал боковую панель, которая состоит из двух навигационных элементов, расположенных абсолютно рядом друг с другом. В нижней части моей так называемой «боковой панели» у меня есть изображение, которое действует как выпадающий список. Когда я активирую выпадающий список, сам пункт меню всегда находится позади так называемой «главной боковой панели». Чтобы прояснить это, у меня есть иллюстрация.
Хотя это должно выглядеть так
В моем CSS (Sass) я никогда не устанавливал z-index вообще. Что вызывает эту проблему
КОД
.dashboard-sub-sidebar {
width: 64px;
background-color: #f9328e;
position: fixed;
display: block;
top: 0;
left: 0;
height: 100vh;
padding: 24px 0 24px 0;
}
.dashboard-sidebar {
transition: width 300ms cubic-bezier(0.2, 0, 0, 1) 0s;
width: 250px;
height: 100vh;
background-color: #f9328e;
position: fixed;
top: 0;
left: 64px;
display: block;
padding: 15px;
color: $text-white;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<nav class="dashboard-sub-sidebar">
<div class="dashboard-sub-sidebar-container">
<div class="dashboard-sub-top-content text-center text-white">
<div class="dashboard-sub-top-logo">
LOGO
</div>
<div class="sidebar-icon-box slideout mt-4" data-slideout-block="search">
<i id="dashboard-sub-search" class="fa fa-search dashboard-sub-search"></i>
</div>
</div>
<div class="dashboard-sub-user-content text-center">
<div class="sidebar-icon-box slideout mb-3" data-slideout-block="notification">
<i id="dashboard-sub-notification" class="fa fa-bell dashboard-sub-notification"></i>
</div>
<div class="sidebar-icon-box mb-3">
<i id="dashboard-sub-help" class="fa fa-question-circle dashboard-sub-help"></i>
</div>
<div class="btn-group dropright">
<img src="http://s3.amazonaws.com/images.seroundtable.com/google-dog-badge-1526987203.jpg" class="dashboard-sub-sidebar-user-image dropdown-toggle" alt="" width="40" height="40" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="dropdown-menu">
<ul class="list-unstyled">
<li><a href="">Profiel</a></li>
<li><a href="">Account instellingen</a></li>
<li><a href="">Uitloggen</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<nav id="dashboard-sidebar" class="dashboard-sidebar shadow">
<div class="dashboard-sidebar-brand">
<h5><a href="../../index.html" class="text-white">Logo bedrijf</a></h5>
</div>
<ul class="dashboard-sub-content list-unstyled">
<a href="" class="dashboard-sidebar-link">
<li class="dashboard-sidebar-listitem active"><i class="fal fa-window-maximize"></i>Dashboard</li>
</a>
<a href="" class="dashboard-sidebar-link">
<li class="dashboard-sidebar-listitem"><i class="fal fa-folder"></i>Projects</li>
</a>
<a href="#" class="dashboard-sidebar-link slideout slideout-item" data-slideout-item="clients">
<li class="dashboard-sidebar-listitem"><i class="fal fa-user-tie"></i>Clients</li>
</a>
<a href="#" class="dashboard-sidebar-link">
<li class="dashboard-sidebar-listitem"><i class="fal fa-user-friends"></i>Employees</li>
</a>
<a href="your_company.html" class="dashboard-sidebar-link">
<li class="dashboard-sidebar-listitem"><i class="fal fa-building"></i>My company</li>
</a>
</ul>
<button id="dashboard-sidebar-toggle" class="btn btn-light btn-sm shadow dashboard-sidebar-toggle"><i class="fal fa-arrow-left"></i></button>
</nav>