z索引重疊不同元素的父對不同親本第n個子

Question

概述：

有2個容器，其稱爲頂父母和中等親和中等親的孩子應重疊頂級父母。

HTML代碼

<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; } 

這是什麼樣子，如果我們雙方父母安置爲絕對。

我希望發生的是爲中等牧師而重疊父2的子女，除了中間的牧師應該重疊父1。

所需的結果：（Photoshop處理）

有沒有辦法做到這一點？

這裏有一個小提琴鏈接CLICK ME

Answer 1

哎韋斯利我猜你正在尋找這樣的： - DEMO

我已刪除的高度& Z-索引看到CSS下文提到如何實現你想要的結果。 ...

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; 
}