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会按预期显示在屏幕上。有谁知道为什么会这样？子div是否总是呈现在其父级之上，即使它具有较低的z-index？

Answer 1

使用z-index:-1;而不是z-index:9000;用于影子div而z-index:1;代替z-index:10000;用于弹出式div

请参阅演示：http://jsfiddle.net/rathoreahsan/QfbUY/

Answer 2

我可能错了，但似乎div的子元素将始终在div前面呈现，即使div具有更高的z级别。我的解决方案是将popup-shadow div放在不同的位置，并使用一对javascript函数来确保在弹出窗口显示和隐藏时它始终可见/隐藏。

位置的z-index：固定

2 个答案: