混淆關於CSS的z-index

Question

我有兩個層，一個是黑色的疊加：

#overlay { 
    background: rgba(0,0,0,0.7); 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0; 
    top: 0; 
    z-index: 0; 
    display: none; 
} 

另一個是我的文字容器：

#wrap { 
    z-index: 999 
    width:600px; 
    height:600px; 
    border:5px solid black; 
    display:none; 
    color:red; 
} 

我希望讓疊加和容器展示在同時：

$(document).click(function() { 
    $('#overlay').add('#wrap').fadeIn(); 
})​​ 

但文本容器總是在覆蓋下，雖然我已經設置了覆蓋z-index到0並設置容器z-index至999

演示是here

終於讓我找到我要覆蓋設置z-index到-1，它會工作。

爲什麼我不能將覆蓋的z-index更高？因爲它的位置是固定的？

Answer 1

z-index不適用於#wrap，因爲它具有流量定位功能。在z-index生效之前，方塊必須至少有position: relative;。

此外，您的z-index值缺少其分號。使它z-index: 999;和它的工作。我的代碼如下：

#wrap { 
    z-index: 999; 
    width:600px; 
    height:600px; 
    border:5px solid black; 
    background: #FFF; 
    display:none; 
    color:red; 
    position: relative; } 

Answer 2

與靜態定位（這是默認值）的元素是由z-index屬性的影響，它的定位改變爲相對