BlackandScholes BlackandScholes - 4 months ago 16
CSS Question

Z-index stacking context

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

https://jsfiddle.net/mL035vmw/2/

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

EDIT: New JSFiddle as the question has been edited: jsfiddle.net/jgbfhv1x/4