z-index 和堆叠；从堆叠上下文中删除一个孩子

Question

我正在尝试调整某些元素的堆叠顺序；这是SSCCE。

鉴于此 HTML sn-p：

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

我正在尝试在#block2 之上显示#widget；使用以下 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-index，在您的情况下，该元素是 block2 的 div 子元素。只需从以下位置修改第一个选择器：

#block1, #block2 , #block3 {

到

#block1, #block2 div, #block3 {

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

jsFiddle example

Answer 2

我猜你不需要更改#widget 的位置。在我看来，答案在于你的问题本身。 Check this out

编辑的 CSS：

#block1{
    background-color: #abc;
    color: #123;
    z-index:3;
}

#block3 {
    background-color: #abc;
    color: #123;
    z-index:1;
}

Answer 3

一个可行的解决方案是使用 div 的 position 堆叠顺序，而不是在此处使用 z-index。因此不会形成不需要的堆叠上下文。

Block 1 & 3 获取默认position: static

Block 2 获得 position: relative（超过 1 和 2）

只有小部件有一个 z-index，它会将它移动到它的顶部！

http://jsfiddle.net/4eENM/