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

Question

小提琴就在这里：https://jsfiddle.net/iggyfiddle/spcsyq8u/6/

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

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

我正在寻找解决方案并考虑z-index。我使主侧边栏具有z-index值＆gt; 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（z-index栏的nav}：https://jsfiddle.net/g8bz9Leh/

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

Answer 2

第一个z-index在同一级别上工作（nav和#main-sidebar-container是相同的级别元素）

第二，你将z-index添加到navbar，将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 -->

Answer 3

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

Answer 4

更改css以执行此操作。当我在你的小提琴中做到这一点时，它起作用了。原因是容器就是那个包含侧栏的东西。因此，如果它没有被推到顶部，那么它内部也不会有任何内容。

import pandas as pd
import numpy as np
df = pd.DataFrame({'col1': ['asdf']*5})
df.col1.iloc[0] = 'jkl'
df
#    output:
#       col1
#    0   jkl
#    1  asdf
#    2  asdf
#    3  asdf
#    4  asdf