Z-Index不起作用

Question

https://codepen.io/anon/pen/veBQYy?editors=1100

I have a div with the class filter. That div is to make the background image lighter. I am trying to make the div with the class inner go on top of the filter. So I put z index: 9999 on the inner div but its not going to the top

 html, body { height: 100%; } .outer { display: table; height: 100%; width: 100%; background: url('https://static.pexels.com/photos/56875/tree-dawn-nature-bucovina-56875.jpeg'); background-size: cover; } .middle { display: table-cell; width: 100%; vertical-align: middle; text-align: center; // Center everything in div } /* To dim background */ .filter { position: absolute; width: 100%; height: 100%; top: 0; background-color: black; opacity: 0.5; } /* This is not working. Z index not bringing it to the top */ .inner { z-index: 9999; } h1 { color: white; } 

 <section class="outer"> <div class="middle"> <div class="filter"></div> <div class="inner"> <h1>Need</h1> <h1>This to go on top zindex 9999 not working</h1> </div> </div> </section> 

Answer 1

You need to make the .inner div position relative

.inner {
  z-index: 9999;  
  position: relative;
}

z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

https://www.w3schools.com/cssref/pr_pos_z-index.asp

Answer 2

The div.filter absolute positioned block is rendered outside of the normal flow. div.inner is in the normal flow. In this case you need to change div.filter.

When you introduce the position property into the mix, any positioned elements (and their children) are displayed in front of any non-positioned elements. (To say an element is “positioned” means that it has a position value other than static, eg, relative, absolute, etc.).

These positioned blocks depart from the stacking order of the non-positioned blocks. IE z-index:9999; does not put the non-positioned block on top. But, you can put the positioned blocks under the non-positioned ones.

.filter {   
  z-index:-1;
}

 html, body { height: 100%; } .outer { display: table; height: 100%; width: 100%; background: url('https://static.pexels.com/photos/56875/tree-dawn-nature-bucovina-56875.jpeg'); background-size: cover; } .middle { display: table-cell; width: 100%; vertical-align: middle; text-align: center; // Center everything in div } /* To dim background */ .filter { position: absolute; width: 100%; height: 100%; top: 0; background-color: black; opacity: 0.5; z-index:-1; } /* This is not working. Z index not bringing it to the top */ .inner { z-index: 9999; } h1 { color: white; } 

 <section class="outer"> <div class="middle"> <div class="filter"></div> <div class="inner"> <h1>Need</h1> <h1>This to go on top zindex 9999 not working</h1> </div> </div> </section>