如何使用 z-index 将侧边栏移动到其他 HTML 元素的前面？

Question

fiddle 就在这里：https://jsfiddle.net/iggyfiddle/spcsyq8u/6/

如果您注意到，当您单击右上角的边栏按钮时，文本和图像就位于边栏的正前方。

从技术上讲，我可以将侧边栏元素移到最底部，这样就可以解决问题。但这不是正确的 CSS 方式，在我的实际应用程序代码中，这很难做到。

我四处寻找解决方案并想到了 z-index。我让 main sidebar 的 z-index 值 > primary-content 的 值，但它看起来仍然一样。主要内容是文本和图像在一起。

.main-sidebar {
  padding:15px;
  overflow:hidden;
  width:300;
  position: relative;
  z-index: 1;
}

.primary-content {
  position: relative;
  z-index: 0;
}

如何使用 Z-index 将侧边栏移动到 所有内容 的前面？

Answer 1

将您的 z-index 值移动到 #main-sidebar-container 并将其设置为 >1000（即 nav 柱的 z-index）：https://jsfiddle.net/g8bz9Leh/

#main-sidebar-container {
  ...
  z-index: 1001;
}

Answer 2

将 z-index 添加到 #main-sidebar-container id。

Answer 3

更改 css 以执行此操作。当我在您的 fiddle 中执行此操作时，它起作用了。原因是容器就是那个包含边栏的东西。所以如果它没有被推到顶部，它里面的任何东西也不会。

#main-sidebar-container {
  padding:15px;
  /*overflow:hidden;*/
  width:300;
  position: absolute;
  z-index: 1111111;
}

.primary-content {
  position: absolute;
  z-index: 0;
}

Answer 4

第一个 z-index 在同一层工作（nav 和#main-sidebar-container 是同一层元素）

第 2 次将 z-index 添加到导航栏，将 z-index 添加到#main-sidebar-container，这样您就可以控制哪个元素位于顶部。

（另一种解决方案是您也可以将 z-index: 9999 设置为 #main-sidebar-container）

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  margin: 10px;
}

nav.navbar{
  position: relative;
  z-index: 1;
}

#main-sidebar-container {
  height: auto;
  position: fixed;
  top: 0px;
  bottom: 0px;
  width: 200px;
  background-color: #202020;
  transition: width 0.35s ease;
  -webkit-transition: width 0.35s ease;
  -moz-transition: width 0.35s ease;
  -o-transition: width 0.35s ease;
  z-index: 10;
}

#main-sidebar-container a {
  color: #ffffff;
}

.main-sidebar {
  padding: 15px;
  overflow: hidden;
  width: 300;
  position: relative;
  z-index: 1;
}

.primary-content {
  position: relative;
  z-index: 0;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>


<nav class="navbar navbar-light bg-faded">
  <a class="navbar-brand navigation-title" href="#">
    <span class="glyphicon glyphicon-apple" aria-hidden="true"></span>
  </a>
  <a class="navbar-brand navigation-title" href="#">One</a>
  <a class="navbar-brand navigation-title" href="#">Two</a>

  <a class="navbar-brand pull-right hamburger-menu" data-toggle="collapse" data-target="#main-sidebar-container" aria-controls="main-sidebar-container" aria-expanded="false" href="#">
   Click for Sidebar
  </a>
</nav>

<!-- sidebar -->
<div id="main-sidebar-container" class="collapse width pull-right">
  <div class="main-sidebar">
    <div class="row">
      <div class="col-xs-12">

        <a class="navbar-brand sidebar-texts" href="#">Menu</a>
        <a class="navbar-brand sidebar-texts" data-toggle="modal" data-target=".login-modal-sm" href="#">Menu2</a>
      </div>
    </div>
  </div>
</div>
<!-- end sidebar -->

<!-- main text -->
<div class="row primary-content">
  <div class="col-md-12">
    <h1>Hello</h1>
    <h4>Lorem Ipsum I love Dimsum</h4>
    <h2>
      Hello Cat!
    </h2>
    <img class="card-img-top img-circle img-responsive pull-left" style="margin:0 auto;" src="http://placekitten.com/g/150/150" alt="Card image cap">
  </div>
</div>
<!-- end main text -->

如何使用 z-index 将侧边栏移动到其他 HTML 元素的前面？

How can I move my sidebar to the front of other HTML elements with z-index?

html

css

z-index