z索引和堆疊； 從堆棧上下文中刪除一個孩子

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因為父級#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 {

您的堆疊順序已更正。 當孩子繼續使用默認值auto時，會將z-index規則應用於父母。 在您的情況下，通過在＃block2 div上設置位置，您可以允許小部件位於block2子div的頂部。

jsFiddle示例

Answer 2

我猜您不需要更改#widget的位置。 在我看來，答案在於您自己的問題。 看一下這個

編輯的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。 因此，不會形成不需要的堆疊上下文。

第1塊和第3塊獲得默認position: static

塊2獲得position: relative （超過1和2）

並且只有該小部件會獲得z-index，將其移至最上方！

http://jsfiddle.net/4eENM/