BlackandScholes BlackandScholes - 3 months ago 5x
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:


<div id="first">
<div id="middlelayer">
<div id="second">
<div id="toplayer">
<div id="lowestlayer">

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:

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

Thank you very much in advance!


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: