z-index overlap different element parent versus different parent nth child - css

Question

Overview:
There are 2 containers which called top-parent and middle-parent and middle-parent's child should overlap the top-parent.
HTML Code
<div id="top-parent" class="wuuh">
<div id="top-child">
I SHALL BLOCK YOU
</div>
</div>
<div id="middle-parent" class="wuuh">
<div id="middle-child">
<div id="middle-cousin">
<div id="middle-niece">
<div id="middle-priest">
NO!
</div>
</div>
</div>
</div>
</div>
CSS
#top-parent { z-index:102; }
#top-parent #top-child { background:#ea1248; width:400px; height: 200px; }
#middle-parent { z-index:101; background:#ccc; width:400px; height:200px; text-align:right; margin-top:10px; }
#middle-parent #middle-child { background:#333; height:100px; }
#middle-child #middle-priest { z-index:200; width:95%; color:#fff; background:#4679bd; padding-right:5%; }
.wuuh { position:absolute; }
This what it looks like if we position both parents into absolute.
What I want to happen is for the middle-priest should overlap the parent 1 while overlapping the parent 2's child except for middle-priest.
Desired Result: (photoshopped)
Is there any way to do this?
Here's a fiddle link CLICK ME

Answer 1

hey wesley i guess you are looking like this :- DEMO
I have removed the height & Z-indexing see mentioned below the css how i achieved your desired result....
CSS
#top-parent { }
#top-parent #top-child {
background:#ea1248;
width:400px;
height: 200px; }
#middle-parent {
z-index:101;
background:#ccc;
width:400px;
text-align:right;
}
#middle-parent #middle-child {
background:#333;
}
#middle-child #middle-priest {
z-index:200;
width:95%;
color:#fff;
background:#4679bd;
padding-right:5%; }
.wuuh {
position:absolute;
}