CODEWITHSUNDEEP
htmlcssz-index
Dirk
Dirk

Reputation: 392

Layering with z-index when using a sidenav and modal

z-index is hard, too hard for me right now. I have a page (#s01) with a fixed sidenav (#s03) and when called a modal (#s02) should cover the whole layer including the sidenav.

Right now the sidenav lays on top of it all despite having a lower z-index than the modal. Altering the z-index (on click) for the sidenav could fix the problem but I'm sure there's a solution without any JavaScript.

This codepen should demonstrate my problem quite well.

What CSS trickery is needed to actually cover the sidenav?

HTML

<div id="s01">
  <div id="s02"></div>
</div>
<div id="s03"></div>

CSS

// main
#s01 {
  position: relative;
  width: 50vw;
  height: 100vh;
  background: red;
  z-index: 1;
  }

// reveal
#s02 {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 50vw;
  height: 100vh;
  background: darkblue;
  z-index: 3;
}

//sidenav
#s03 {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 200px;
  background: green;
  z-index: 2;
}

Upvotes: 1

Views: 70

Answers (1)

Alex Char
Alex Char

Reputation: 33228

Because fixed position element doesn't share the same parent element as the rest elements:

html

<div id="s01">
  <div id="s02">Modal!</div>
  <button id="mybutton">Click me!</button>
  <div id="s03"></div>
</div>

codepen

The z-index property specifies the z-order of an element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.

z-index

Upvotes: 3

Related Questions