Search code examples
htmlcssz-index

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?

Solution

  • 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;
}