applying z-index on inner div to appear on top of an overlay

Question

I'm trying to overlay an entire page except for one div with a transparent overlay. The problem is that the div I want on top is a child of a fixed div. How do I make it on top, but leave its parent under the overlay?

In the below code, the element I want on top of the overlay is .holder. Here's a JS Fiddle.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>z-index tests</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="root">
    Root
      <div class="header">
      Header
        <div class="holder">
          Holder
        </div>
      </div>
      <div class="content">
      content
        <div class="box"></div>
      </div>
    </div>
    <div class="overlay"></div>
  </body>
</html>

CSS:

.box {
  height: 100px;
  width: 100px;
  border: 1px solid #000;
}

.root {
  display: block;
  background-color: grey;
}

.header {
  background-color: red;
  position: fixed;
  top: 0px;
  width: 1600px;
}

.holder {
  background-color: green;
  height: 60px;
  width: 1600px;
  z-index: 1002;
  position: absolute;
}

.content {
  background-color: blue;
}

.overlay {
  position: fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color: rgb(50,50,50);
  opacity:0.8;
  z-index:10;
}

score 1 · Answer 1 · answered Nov 25 '16 at 21:51

You cannot. That's how z-index and stacking layers work. Until .holder is descendant of .header which creates it's own stacking context through position: fixed, the only way to push .holder above the overlay is to move it in DOM tree outside .header and make it a sibling or descendant of .overlay.

The second option (but I guess .header is not fixed without reason) is to change styles of .header to not create stacking context, ex. change it's position to absolute and remove z-index. In that case stacking context of .holder will be on equal level with .overlay's and you would be able to manipulate depth of those with z-index.

Look at list of CSS properties creating new stacking context.

I know I'm leaving you inconsolable.

Thanks anyway Eryk. I'm gonna go with a different approach for what I'm trying to do. [This](http://stackoverflow.com/a/28616718/1840918) will work for my purposes and probably save me a lot of headache! — Abdul, Nov 25 '16 at 22:11

Moob · Answer 2 · 2016-11-25T22:22:35.103

You could cheat and achieve the same effect by adding a massive box-shadow to the .holder:

.box {
  height: 100px;
  width: 100px;
  border: 1px solid #000;
}

.root {
  display: block;
  background-color: grey;
}

.header {
  background-color: red;
  position: fixed;
  top: 0px;
  width: 1600px;
  /*z-index: 1;*/
}

.holder {
  background-color: green;
  height: 60px;
  width: 1600px;
  z-index: 1002;
  position: absolute;
}

.content {
  background-color: blue;
}

.highlight {
  box-shadow:0 0 0 9999999px rgba(50,50,50,0.8);
}

  <div class="root">
    Root
    <div class="header">
      Header
      <div class="holder highlight">
        Holder
      </div>
    </div>
    <div class="content">
      content
      <div class="box"></div>
    </div>
  </div>

JS Fiddle

applying z-index on inner div to appear on top of an overlay

2 Answers2