javascript - 为什么我的叠加层覆盖了一些元素而不是全部？

Question

我正在尝试使用 div 创建我自己的模态对话框:

html:
<div id="overlay"> </div>    
<div id="popup">  

    <input type="submit"/>
    <p>Some text</p>

</div>

css:
#overlay{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    background-color:#000;
    opacity: .75;
    z-index: -1;
}

#popup {
    position: absolute;
    text-align:center;
    z-index: 1000;
}

http://jsfiddle.net/wfsaxton/fq7mhefa/

我不确定为什么，但我的叠加层不仅覆盖了页面，还覆盖了弹出窗口的一部分(背景和文本)。我只希望它在后台覆盖页面...弹出窗口应完全位于叠加层之上。

任何想法可能会发生什么？

Answer 1

要覆盖所有内容，z-index 值必须大于其他所有内容。你的 -1。