El violín está aquí: https://jsfiddle.net/iggyfiddle/spcsyq8u/6/

Si te das cuenta, cuando haces clic en el botón superior derecho de la barra lateral, los textos y la imagen se encuentran justo en frente de la barra lateral.

Sidebar to prove point

Técnicamente, podría mover el elemento de la barra lateral hacia la parte inferior y eso lo resolverá. Pero esa no es la forma correcta de CSS, y en mi código de aplicación real, esto será difícil de hacer.

Estaba buscando una solución y pensé en z-index. Hice que la barra lateral principal tuviera el valor de índice z> valor de contenido primario , pero aún se ve igual. El contenido principal es el texto y las imágenes juntos.

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

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

¿Cómo puedo mover la barra lateral para estar delante de todo usando el índice Z?

1
Iggy 21 jun. 2017 a las 19:54

4 respuestas

La mejor respuesta

Mueva su valor z-index a #main-sidebar-container y configúrelo a >1000 (que es el z-index de la barra nav): https://jsfiddle.net/g8bz9Leh/

#main-sidebar-container {
  ...
  z-index: 1001;
}
2
J. Titus 21 jun. 2017 a las 16:59

El primer índice z funciona en el mismo nivel (nav y # main-sidebar-container son los mismos elementos de nivel)

Segundo, agrega el índice z a la barra de navegación y el índice z al # main-sidebar-container para que tenga control sobre qué elemento estará en la parte superior.

(Otra solución es que también podría configurar z-index: 9999 en #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 -->
1
Dalin Huang 21 jun. 2017 a las 17:18

Cambie el CSS para hacer esto. Cuando lo hice en tu violín, funcionó. La razón es que el contenedor es exactamente eso, lo que contiene la barra lateral. Entonces, si no se está empujando hacia arriba, tampoco nada dentro de él.

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

.primary-content {
  position: absolute;
  z-index: 0;
}
0
salwine 21 jun. 2017 a las 17:10

Agregue z-index a la identificación #main-sidebar-container.

0
gre_gor 21 jun. 2017 a las 17:56