html - z索引和堆叠；从堆栈上下文中删除一个 child

我正在尝试调整某些元素的堆叠顺序；这是一个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;
}

正如您在 fiddle 中看到的那样，#widget与#block2部分重叠；这很合理，因为父#block1在堆叠顺序中的 sibling 中较低。

显而易见的答案是:让#widget成为#block2的子级，但是不幸的是，这不是解决方案。另外，#blockN元素不能修改其相对的z-index值。块1和3必须小于2。(这意味着计算值可能不同，但是#block2始终大于其 sibling )。这样做的原因是box-shadow分层。

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

使用fixed定位可以根据需要将其删除，但是它还获得了固定的所有视觉属性(这使其成为非解决方案)

我认为这可能已经通过回旋方式得到了解决，但是我没有找到。另外，道歉；看来我在最初的帖子中可能错过了一些无害但关键的细节。我想我已经涵盖了所有内容。

最佳答案

您的规则并没有真正应用到您希望将它们应用到的元素。您需要在要定位的元素上显式设置z-index，在这种情况下，该元素是block2的div子元素。通过简单地从以下方式修改第一个选择器:

#block1, #block2 , #block3 {

至

#block1, #block2 div, #block3 {

您的堆叠顺序已更正。当 child 继续使用默认值auto时，会将z-index规则应用于 parent 。在您的情况下，通过在＃block2 div上设置位置，您可以让小部件位于block2子div的顶部。

jsFiddle example

关于html - z索引和堆叠；从堆栈上下文中删除一个 child ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18305398/