z-index重叠不同的元素父母与不同的父母第n个孩子

Question

概述：

有2个容器称为 top-parent ，中间父和中间父的子容应重叠的顶父母

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

如果我们将两个父母置于绝对中，就会出现这种情况。

我想要发生的事情是中间牧师应该与父母1重叠，同时重叠父母2的孩子，除了中间牧师。

期望的结果：（photoshopped）

有没有办法做到这一点？

这是一个小提琴链接CLICK ME

Answer 1

嘿，韦斯利，我猜你看起来像这样： - DEMO

我已经删除了高度＆amp; Z-indexing在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; 
}