CODEWITHSUNDEEP
htmlcssz-index
Abdul
Abdul

Reputation: 261

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

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

Upvotes: 1

Views: 2463

Answers (2)

Moob
Moob

Reputation: 16214

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

Upvotes: 1

Eryk Napierała
Eryk Napierała

Reputation: 506

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.

Upvotes: 1

Related Questions