时间戳

首页 > 解决方案 > 侧边栏 z-index 始终高于下拉菜单

html - 侧边栏 z-index 始终高于下拉菜单

问题描述

我制作了一个侧边栏，其中包含 2 个绝对彼此相邻的导航元素。在我所谓的“子侧边栏”的底部，我有一个充当下拉菜单的图像。当我激活下拉菜单时，菜单项本身总是位于所谓的“主侧边栏”后面。为了说明这一点，我有一个插图。

在此处输入图像描述

虽然它应该看起来像这样

在此处输入图像描述

在我的 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>

标签： htmlcsssassz-index

解决方案

同一堆叠上下文中的元素将按出现顺序显示，后面的元素位于前面的元素之上。

.dashboard-sub-sidebar在您的示例中，由于之前声明了工具提示的父级，因此由于出现顺序，dashboard-sidebar最后一个自动位于其子级之上。.dashboard-sub-sidebar添加z-index到.dashboard-sub-sidebar将解决问题。

推荐阅读