我應該知道關於z-index的任何奇怪規則嗎？

對不起，我不能發佈完整的代碼，我正在研究專有的東西。基本上，我有一個問題，其中Z-index 6的DIV被Z-index爲5的覆蓋DIV阻塞。是否有任何情況會導致這種情況發生？我試圖弄清楚爲什麼會發生這樣的事情，我正在絞盡腦汁。它只是沒有任何意義。任何與嵌套DIV有關的事情，或CSS position也許？我應該知道關於z-index的任何奇怪規則嗎？

對於模糊性我表示歉意。我試圖在JSFiddle中重新創建，但不幸的是它按預期工作。只有實際的代碼是不可靠的。

結構：

<div id="window"> 
    <div id="wall"> 
     <div class="box" /><div class="box" /> .... many boxes 
    </div> 
</div> 
<div id="overlay" />

CSS：

 $('<div id="overlay"></div>').css({ 
      'left': $('#window').position().left + 'px', 
      'top': $('#window').position().top + 'px', 
      'width': $('#window').width() + 'px', 
      'height': $('#window').height() + 'px', 
      'opacity': 0.8 
     }).appendTo('body');

即使一個箱子有Z-：

#window { 
    position: relative; 
    width: 960px; 
    height: 700px; 
    overflow: hidden; 
    background: #666; 
} 

#wall { 
    position: relative; 
    width: 1640px; 
    height: 1600px; 
    -webkit-perspective: 2000; 
} 

#overlay { 
    position: absolute; 
    z-index: 5; 
    background: #000; 
} 

.box { 
    left: 0px; 
    top: 0px; 
    position: absolute; 
    width: 228px; 
    height: 228px; 
    color: #fff; 
    font-family: Helvetica, Arial, sans-serif; 
    font-weight: bold; 
    font-size: 0.8em; 
    -webkit-transform-style: preserve-3d; 
    z-index: 4; 
    cursor: pointer; 
}

覆蓋尺寸在一個特定的事件通過jQuery設置指數爲6，覆蓋層爲5，覆蓋層仍然覆蓋在所述框上。

疊加層應該放在窗口上，但讓其中一個框通過。

爲什麼這個JSFiddle工作，但我的實際代碼不？？ http://jsfiddle.net/csaltyj/2gzTc/

來源

2012-03-16 CaptSaltyJack

z-index僅在位置被定義時才起作用......也許你的z-index 6沒有被應用。檢查html – 2012-03-16 04:06:52

如果元素不是兄弟，它可能不起作用。 – gilly3 2012-03-16 04:10:34

當您混合絕對項目和相對項目時，Explorer已知將z索引分成不同的「集合」。像所有「絕對」定位元素都有一個z-索引，所有「相對」定位元素都有一個完全獨立的z-索引，它忽略了另一個。我知道沒有其他瀏覽器有這個怪癖，所以這個應該很容易隔離。 – Sparky 2012-03-16 04:13:58

z-index僅適用於要素與position:relative，absolute，或fixed。這似乎讓很多人都出去了。

此外，一個孩子永遠不能低於其父母。 This example，同樣在Jsfiddle說明它。

基於這個例子中你添加的很清楚，你遇到的麻煩：

z-index只是相對於它的父，在大多數情況下是文件本身。如果一個兄弟姐妹的z-index低於另一個兄弟姐妹，那麼您對第一個兄弟姐妹的孩子所做的任何更改都可以將其移到其父母兄弟姐妹之上。如果您有興趣，請閱讀更多關於stacking context的信息。

這裏是一個可視化：

z-index example

紅色交叉出是你想做的事，這是不可能的CSS（考慮那些小方框是大盒的兒童，標記這可能是這樣的：

<div class="one"> 
</div> 
<div class="two"> 
    <div> I can never be above "one", if my parent "two" isn't. </div> 
</div>

一個解決方案是移動的「疊加」牆內，或者更好的使用僞元素（呈現爲它應用到元素的子）因爲疊加聽起來像它是表示性的，因此如果覆蓋div不會增加語義含義，則應該保留在CSS的域中。

來源

2012-03-16 04:07:01 bookcasey

好的。在這種情況下，我只使用相對和絕對。 – CaptSaltyJack 2012-03-16 04:09:50

查看更新的問題（更多代碼） – CaptSaltyJack 2012-03-16 04:23:34

Dablet在Safari中顯示完全空白。 jsFiddle可以輕鬆使用嗎？ – Sparky 2012-03-16 04:23:38

我應該知道關於z-index的任何奇怪規則嗎？

回答

相關問題