Z索引堆叠上下文

Question

I encountered the problem that z-index is not as simple as it sounds.

After reading basically everything I found about it, I still could not figure out a solution. So here is my problem:

JSFiddle

<div id="first">
 <div id="middlelayer">
   2
 </div> 
</div>
<div id="second">
  <div id="toplayer">
    1
  </div>
  <div id="lowestlayer">
    3
  </div>
</div>

I want a Div of a different parent (#middlelayer) to sit between two other Divs ( #toplayer and #lowestlayer ). I have experimentend with basically every combination of z-indices and also tried the workaround with opacity: .99, described here:

https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Nothing seemed to work so far, I hope you can help me.

Thank you very much in advance!

Answer 1

 .toplayer { width: 120px; background-color: green; position: fixed; z-index: 3; } #middlelayer { width: 140px; background-color: blue; position: fixed; z-index: 2; } #lowestlayer { width: 160px; background-color: yellow; position: fixed; } 

 <div id="first" > <div id="middlelayer"> middle </div> </div> <div id="second"> <div id="second2"> <div id="lowestlayer"> low </div> <div class="toplayer"> top </div> </div> </div> 

I just added z-index:1 to z-index:3 to each of the elements and it seems to produce the desired effect.

EDIT:

Removed JSFiddle from my answer and replaced it with a code snippet.

Answer 2

It doesn't appear to be a z-index problem but one of positioning. Since you are using fixed positioning remember that the elements are being positioned relative to the viewport. To get the result you want set on to top , one to bottom , and for the last (which needs to be centered) use this little trick called absolute centering .

Here is an example you can see on JSFiddle...

https://jsfiddle.net/kennethcss/smejLps4/

Update:

If the desired result is simply to "Layer" the elements you just need to apply z-index like so...

JSFiddle

Answer 3

I think this is what you need. Please check the below code.

 #lowestlayer { opacity: .99; } #lowestlayer, #middlelayer, #toplayer { position: absolute; width: 100px; color: white; line-height: 100px; text-align: center; } #lowestlayer { z-index: 1; top: 20px; left: 20px; background: red; width: 200px; height: 200px; } #middlelayer { top: 45px; left: 45px; background: green; z-index: 2; width: 150px; height: 150px; } #toplayer { top: 70px; left: 70px; background: blue; z-index: 3; width: 100px; height: 100px; } 

 <div id="first"> <div id="middlelayer"> 2 </div> </div> <div id="second"> <div id="toplayer"> 1 </div> <div id="lowestlayer"> 3 </div> </div>