z-indexs倉位：固定

Question

我想在我的網站上放置一個模式彈出窗口。它的HTML是這樣的：

<div id="thePopup" class="popup" style="display:none;"> 
    <div class="popup-shadow">.</div> 
    <h3>My Details</h3> 
    <p>Message....</p> 
</div> 

然後，我有CSS（實際上SASS，它編譯成CSS）是這樣的：

.popup { 
    z-index:10000; 
    width:32em; 
    position:absolute; 
    left:20%; 
    width:60%; 

    .popup-shadow { 
     position:fixed; 
     top:0%; 
     left:0%; 
     width:100%; 
     height:100%; 
     z-index:9000; 

     background-color:#999999; 
     /* I have yet to do it, but the shadow will be slightly transparent */ 
    } 
} 

有，設置thePopup來顯示一個按鈕：塊當用戶點擊它。彈出窗口嵌套在我網站上的一個內容面板中。它是position:absolute，所以當它可見時它會出現在它的父面板上方。我不會將thePopup設置爲position:fixed，因爲它可能比用戶屏幕的高度大，我希望它們能夠在其上滾動。但是，我希望在屏幕上的任何地方變暗而不是彈出窗口 - 以向用戶指示他們需要與其進行交互。

這就是我遇到的問題 - popup-shadow正在thePopup的前面提供，儘管它具有較低的z級別。我不知道這是爲什麼。如果我拿走popup-shadow div，thepopup按預期出現在屏幕上。有沒有人有任何想法，爲什麼這是？即使它的z-index值較低，子div是否會始終顯示在父代之上？

Answer 1

我可能是錯的，但似乎一個div的子元素總是會渲染在div的前面，即使div具有更高的z級別。我的解決方案是將popup-shadow div放在不同的位置，並使用一對javascript函數來確保在彈出窗口被顯示和隱藏時它總是可見/隱藏的。

Answer 2

使用z-index:-1;，而不是z-index:9000;影子DIV和z-index:1;而不是z-index:10000;爲彈出的DIV

見演示：http://jsfiddle.net/rathoreahsan/QfbUY/