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/