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，同时保留其位置，坐标位置，尺寸等？< / p>

使用fixed定位会根据需要删除它，但它也会获得所有被修复的视觉属性（使其成为非解决方案）

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

Answer 1

您的规则并不真正适用于您希望它们应用于的元素。您需要在要定位的元素上显式设置z-index，在这种情况下，该元素是block2的div子元素。只需修改第一个选择器：

#block1, #block2 , #block3 {

到

#block1, #block2 div, #block3 {

您的堆叠订单已更正。您的z-index规则正在应用于父级，而孩子们继续使用默认的auto。在您的情况下，通过设置＃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＆amp; 3获得默认position: static

第2块获得position: relative（超过1＆amp; 2）

并且只有小部件获得一个z-index，它将它全部移动到它上面！

http://jsfiddle.net/4eENM/

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

3 个答案: