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

Question

概述:

有两个容器，分别叫做top-parent 和middle-parent，middle-parent 的 child 应该覆盖顶层父级。

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

如果我们将双方 parent 都定位到绝对，这就是它的样子。

我想要发生的是 middle-priest 应该与 parent 1 重叠，同时与 parent 2 的 child 重叠，middle-priest 除外。

期望的结果:(照片处理)

有什么办法吗？

这是一个 fiddle 链接 CLICK ME

Answer 1

嘿 wesley，我猜你看起来像这样:- 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; 
}