z-index和堆叠; 从堆叠上下文中删除子项

Question

我正在尝试调整某些元素的堆叠顺序; 这是一个SSCCE.

鉴于此HTML代码段:

<div id="block1">
    <div>Lorem ipsum dolor.</div>
    <div id="widget">
        <div>Widgety goodness!</div>
    </div>
</div>
<div id="block2">
    <div>Lorem ipsum dolor.</div>
</div>
<div id="block3">
    <div>Lorem ipsum dolor.</div>
</div>

我试图#widget在上面显示#block2; 使用以下CSS,您将看到在不更改#widget节点树中的位置的情况下存在问题.

#block1, #block2, #block3 {
    position: relative;
    min-height: 50px;
    width: 100%;
}
#block1, #block3 {
    background-color: #abc;
    color: #123;
    z-index: 1;
}
#block2 {
    background-color: #def;
    color: #456;
    z-index: 2;
}
#widget {
    background-color: #f00;
    position: absolute;
    z-index: 999;
    left: 200px;
    top: 40px;
}

正如你在小提琴中看到的,#widget部分重叠#block2; 这是完全合理的,因为父母#block1在堆叠顺序中的兄弟姐妹中较低.

明显的答案是:做#widget一个孩子#block2,但不幸的是,这不是一个解决方案.此外,#blockN元素不能z-index修改其相对值; 块1和块3必须小于2.(我的意思是计算值可能不同,但#block2总是大于它的兄弟姐妹).原因在于box-shadow分层.

是否有任何合理的(读取:跨浏览器,IE7 +)方式#widget从其堆叠上下文中删除,同时保留它的位置,坐标位置,尺寸等？

使用fixed定位可以根据需要删除它,但是它也可以获得所有被修复的视觉属性(这使得它不是解决方案)

_{我估计这可能是以迂回的方式回答的,但我没有找到它.道歉; 看来我可能在我的帖子中遗漏了一些无关紧要但关键的细节.我想我现在已经把它们全部覆盖了.}

Answer 1

您的规则并没有真正应用于您希望它们应用的元素。您需要在要定位的元素上显式设置 z 索引，在您的情况下，该元素是 block2 的 div 子元素。通过简单地修改第一个选择器：

#block1, #block2 , #block3 {

到

#block1, #block2 div, #block3 {

您的堆叠顺序已更正。您的 z-index 规则应用于父级，而子级继续使用默认的 auto。在您的情况下，通过设置 #block2 div 上的位置，您可以允许您的小部件位于 block2 子 div 的顶部。

jsFiddle 示例