CODEWITHSUNDEEP
htmlcssz-index
Iggy
Iggy

Reputation: 5251

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

The fiddle is right here: https://jsfiddle.net/iggyfiddle/spcsyq8u/6/

If you notice, when you click the top right button for sidebar, the texts and image are sitting right in front of the sidebar.

Sidebar to prove point

Technically, I could just move the sidebar element towards the very bottom and that will solve it. But that's not the right CSS way, and in my actual app code, this will be hard to do.

I was looking around for solution and thought of z-index. I made the main sidebar to have z-index value > primary-content's value, but it still look the same. Primary-content is the text and images together. 

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

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

How can I move the sidebar to be in front of everything using Z-index?

Upvotes: 2

Views: 6484

Answers (4)

Shourav Biswas
Shourav Biswas

Reputation: 20

Add z-index to #main-sidebar-container id.

Upvotes: 0

Dalin Huang
Dalin Huang

Reputation: 11342

1st z-index works on the same level (nav and #main-sidebar-container are the same level elements)

2nd you add z-index to navbar and z-index to #main-sidebar-container so you have control which element will be on the top.

(Another solution is you could also just set z-index: 9999 to #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 -->

Upvotes: 1

salwine
salwine

Reputation: 50

Change the css to do this. When I did it in your fiddle, it worked. The reason is the container is exactly that, the thing that contains the side bar. So if it's not being pushed to the top, nothing inside of it will either.

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

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

Upvotes: 0

J. Titus
J. Titus

Reputation: 9690

Move your z-index value to #main-sidebar-container and set it to >1000 (which is the z-index of the nav bar): https://jsfiddle.net/g8bz9Leh/

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

Upvotes: 2

Related Questions