Javascript 为什么我的覆盖层覆盖了一些元素而不是全部？

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

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;
}

html：
一些文本

css:
#覆盖层{
宽度：100%；
身高：100%；
位置：固定；
左：0px；
顶部：0px；
背景色：#000；
不透明度：.75；
z指数：-1；
}
#弹出窗口{
位置：绝对位置；
文本对齐：居中；
z指数：1000；
}

我不知道为什么，但我的覆盖不仅覆盖了页面，还覆盖了弹出窗口的部分（背景和文本）。我只希望它在背景中覆盖页面…弹出窗口应该完全位于覆盖层之上

---

有什么想法吗？

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

-1

#覆盖{
宽度：100%；
身高：100%；
位置：固定；
左：0px；
顶部：0px；
背景色：#000；
不透明度：.75；
z指数：5；
}
.弹出窗口{
显示：无；
位置：绝对位置；
文本对齐：居中；
z指数：；
}

读者在查看页面布局时会被页面的可读内容分散注意力，这是一个由来已久的事实。使用Lorem Ipsum的意义在于，它的字母分布或多或少是正态的，而不是使用“此处内容，此处内容”，使其看起来像可读的英语。许多桌面发布软件包和网页编辑器现在使用Lorem Ipsum作为默认模型文本，搜索“Lorem Ipsum”将发现许多尚处于起步阶段的网站。多年来，各种版本不断演变，有时出于偶然，有时出于故意（注入幽默等）。
一些文本

一些文本

啊，这太简单了。我的弹出窗口没有指定背景，因此，我猜默认情况下它是透明的

刚才补充说：

#popup {
    ....
    background-color: white;
}

---

它现在可以工作了：

因为它有更高的z指数请尝试使用z-index:999创建覆盖图。弹出窗口的z-index高于覆盖图。因此，我假设弹出窗口会出现在覆盖层的上方。只有某些标记（如输入）位于覆盖上方。其余部分（如文本和背景）在覆盖层下面。对不起，我不清楚。我希望弹出窗口位于覆盖层之上，覆盖层位于页面其余部分之上。现在弹出窗口的部分显示在覆盖层下面，即使弹出窗口的z索引大于覆盖层的z索引。对不起，我不清楚。我希望弹出窗口位于覆盖层之上，覆盖层位于页面其余部分之上。现在，尽管弹出窗口的z索引大于覆盖窗口的z索引，但部分弹出窗口仍显示在覆盖窗口下方。