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

【问题标题】：z-index overlap different element parent versus different parent nth childz-index 重叠不同的元素父元素与不同的父元素第 n 个子元素
【发布时间】：2014-03-14 04:06:31
【问题描述】：

概述：

有 2 个容器分别称为 top-parent 和 middle-parent 和 middle-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; }

如果我们将双方父母定位为绝对，这会是什么样子。

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

想要的结果：（照片处理）

有什么办法吗？

这是一个小提琴链接CLICK ME

【问题讨论】：

标签： css

【解决方案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; 
}

【讨论】：