How to set Z-index to nested elements? - css

Question

I have two base DOM elements and two inner elements.
Blue box must overlap grey box.
Blue inner box must overlap blue and grey boxes.
Grey inner box must overlap all other elements.
But it doesn't.
#grey_box {
width: 200px;
height: 200px;
border: solid 1px #ccc;
background: #ddd;
position: relative;
z-index: 10;
}
#blue_box {
width: 200px;
height: 200px;
border: solid 1px #4a7497;
background: #8daac3;
position: relative;
z-index: 20;
margin-left: 80px;
margin-top: -50px;
}
#grey_inner_box {
width: 50px;
height: 50px;
background: red;
position: relative;
z-index: 200;
margin-top: 80px;
margin-left: 150px;
}
#blue_inner_box {
width: 50px;
height: 50px;
background: green;
position: relative;
z-index: 100;
margin-left: 40px;
margin-top: -40px;
}
<div id="grey_box">
<div id="grey_inner_box">grey inner</div>
</div>
<div id="blue_box">
<div id="blue_inner_box">blue inner</div>
</div>
What am I doing wrong?

Answer 1

What you want isn't possible.
Once you set an element to position: anything except static, it establishes a new stacking context.
Anything you set the z-index of inside it, is only positioned within it.
Take this for example:
<div id="box1">
<div id="paper1"></div>
<div id="paper2"></div>
<div id="paper3"></div>
</div>
<div id="box2">
<div id="paper4"></div>
<div id="paper5"></div>
<div id="paper6"></div>
</div>
Inside each box, you can put the papers in any order you like. You can put box1 on top of box2 or vice versa, but when you move a box, you take the papers inside the box with it.
If you want to overlap the papers in the different boxes, you need to take them out of the boxes first.

Answer 2

Remove the z-index from #grey_box. Since #grey_box is beneath all other divs, we dont need z-index there. This helps to bring the #grey_inner_box to top.
#grey_box {
width: 200px;
height: 200px;
border: solid 1px #ccc;
background: #ddd;
position: relative;
/* z-index: 10; */
}
#blue_box {
width: 200px;
height: 200px;
border: solid 1px #4a7497;
background: #8daac3;
position: relative;
z-index: 20;
margin-left: 80px;
margin-top: -50px;
}
#grey_inner_box {
width: 50px;
height: 50px;
background: red;
position: relative;
z-index: 200;
margin-top: 110px;
margin-left: 150px;
}
#blue_inner_box {
width: 50px;
height: 50px;
background: green;
position: relative;
z-index: 100;
margin-left: 40px;
margin-top: -40px;
}
<div id="grey_box">
<div id="grey_inner_box">grey inner</div>
</div>
<div id="blue_box">
<div id="blue_inner_box">blue inner</div>
</div>