的z-index不是絕對

Question

位置工作，我打開控制檯（鉻\ Firefox瀏覽器），並運行以下行：

$("body").append("<div id=\"popupFrame\" style=\"width:100%;height:100%;background-color:black;opacity:0.5;position:absolute;top:0;left:0;z-index:1;\" />"); 
$("body").append("<div id=\"popupContent\" style=\"width:200px;height:200px;z-index:1000;background-color:white;\" >dasdasdsadasdasdasdasdasd</div>"); 

的#popupContent應高於一切，但它受#popupFrame透明度。

內容不包含在#popupFrame中，這使得這很奇怪。

的目標是創建火狐像警告框

我會感謝任何形式的幫助。

在此先感謝。

Answer 1

第二個div是position: static（缺省值），所以z-index不適用於它。

您需要定位（將位置屬性設置爲除static之外的任何內容，您可能需要relative）任何要給z-index的內容。

Answer 2

不透明度會改變z-index的上下文，就像靜態定位一樣。將不透明度添加到沒有它的元素或將其從元素中移除。您還必須使兩個元素靜態定位或指定相對或絕對位置。這裏是背景的一些背景：http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Answer 3

z-index僅適用於已被賦予明確位置的元素。將＃position:relative添加到#popupContent，你應該很好去。

Answer 4

老問題，但這個答案可能有助於某人。

如果您試圖在容器邊界外顯示容器的內容，請確保它沒有overflow:hidden，否則它外面的任何內容都將被切斷。