z-index鉻錯誤

我遇到了一個真正煩人的錯誤，似乎只發生在Windows和OS X上：父母有固定位置的元素的z-index在Chrome上不起作用！我將我奇怪的情況，以一個簡單的代碼：z-index鉻錯誤

HTML：

<div id="mask"> 
    &nbsp; 
</div> 

<div id="box"> 
    <div class="below-mask circle"> 
     should be below the mask 
    </div> 

    <div class="above-mask circle"> 
     should be above the mask 
    </div> 
</div>

CSS：

body { 
    font-family: Verdana; 
    font-size: 9px; 
    margin: 0px; 
} 

#box { 
    position: fixed; 
} 

#mask { 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    background-color: rgba(0, 0, 0, 0.5); 
    width: 100%; 
    height: 100%; 
    z-index: 9998; 
} 

.circle { 
    position: relative; 
    background-color: rgba(255, 204, 0, 0.75); 
    border-radius: 75px; 
    line-height: 150px; 
    margin: 50px; 
    text-align: center; 
    width: 150px; 
    height: 150px; 
} 

.above-mask { 
    z-index: 9999; 
} 

.below-mask { 
    z-index: 9997; 
}

沙箱：http://jsfiddle.net/gibatronic/umbgp/

我在Internet Explorer 9，Firefox的15，Opera上進行測試12.02和Safari 5.1.7在OS X和Windows上，並且所有這些都按預期顯示。我也在Ubuntu 12.10上測試過，並且對於包括Chrome瀏覽器在內的所有瀏覽器都很好用！我甚至在Kindle 4瀏覽器上測試過，它工作正常！

我想知道有沒有人知道解決此問題的任何修補程序！

來源

2012-10-22 gibatronic

實際上，在ff 16.0.1上它沒有按預期的那樣顯示...... – LorDex

@LorDex你在哪個操作系統中測試過？使用Firefox 16.0.1，在Ubuntu和Windows上，一切工作正常！ – gibatronic

one800higgins的回答是正確的。真正的答案是on mobile WebKit and Chrome 22+, position: fixed always creates a new stacking context, even when z-index is auto。所以堆疊上下文結構是這樣的：

文檔根目錄（z-index的0）
- #mask（z-index的9998）
- #box（z-index的0）
  - .above-mask（ z-index 9999）
  - .below-mask（z-index 9997）

這意味着，9998不會與9999或9997比較，以確定堆疊順序。相反，9999與9997比較，以確定其中.above-mask和.below-mask進一步在前面，然後一旦內部#box一切被堆疊在這方面，它會被視爲在它獲取在Z-堆疊後面#mask z索引0單層索引9998。

這也解釋了爲什麼@ TheNextBillGates的移動#mask內#box作品的答案 - 因爲那時#mask是在同一個堆疊上下文.above-mask和.below-mask。我強烈推薦上面的鏈接以獲得更全面的細節，並且您還應該看到the announcement for the stacking change for fixed elements in Chrome。

來源

2013-09-06 23:58:40

非常好的解釋和感謝鏈接。這不是我一直以爲的錯誤！你讓我今天一整天都感覺很好。 –

-1

在#box上更改或刪除position: fixed，然後設置好。

jsFiddle

來源

2012-10-22 20:41:02

不幸的是，因爲我的項目中的''＃box'''實際上是一個粘性菜單，這就是爲什麼它具有固定的位置，所有這一切的想法是在導遊中突出顯示菜單中的項目。 – gibatronic

刪除「位置：固定」不會做任何好事，因爲mask div是半透明的。 – LorDex

檢查我張貼的jsFiddle ...刪除'位置：固定'是我所做的，它的工作完美。透明度與它無關......您可以將它們設置爲純色並親自查看。 – 2012-10-22 20:53:47

我只是碰到了這個bug來了，它仍然在谷歌瀏覽器V26發生。我可以從代碼或Chrome的CSS編輯器中設置Z-index的高度，並且沒有什麼區別（並且元素的位置被設置爲絕對）。相同的Z-index設置在Firefox中甚至IE8-IE10中的預期效果。當我將父元素從position：fixed切換到position：absolute時，子元素的z-index在Chrome中運行良好。

來源

2013-04-24 20:46:33

如果您將#mask移動到#box之內，它就可以正常工作。

<div id="box"> 
    <div id="mask">&nbsp;</div> 
    <div class="below-mask circle">should be below the mask</div> 
    <div class="above-mask circle">should be above the mask</div> 
</div>

這裏有一個小提琴http://jsfiddle.net/TheNextBillGates/jKm4b/

不知道這是爲什麼，只是還沒有。

來源

2013-08-31 08:07:12 TheNextBillGates

爲您的固定div指定z-index。這應該會導致chrome尊重所有孩子的z-index值。

來源

2013-09-05 18:17:22 Jake

在我看來，多個z-index堆棧是不幸的，令人困惑，但是如果你提高任何目標元素的父母的z-index，你可以在不改變你的html結構的情況下解決這個問題。嘗試找到與您的內容重疊的麻煩元素的兄弟元素的父元素。應用此造型：

position: relative; z-index: [# higher than overlapping element's z-index];

您的milage可能因您的項目而異，但此解決方案適用於我的項目。

來源

2013-10-11 22:15:18

我認爲它是因爲它不在像模式窗口那樣的頁面底部。簡單的解決方法就是抓住所有的模式窗口，並在結束標籤之前將它們放入div中。下面的例子解決了我所遇到的每一個chrome問題。

$('body').append('<div id="modelContainer" />'); 
$('.modal').each(function() { 
    $(this).appendTo('#modelContainer'); 
})

來源

2016-07-05 15:29:05 DevNinjaJeremy

這將是一種解決方法，不需要恢復到js來解決它，我對z-index堆棧問題的解決方案更感興趣，但正如接受的答案指出的那樣，我錯過了嘗試實現。 – gibatronic

回答

相關問題