javascript - div 完全覆盖页面

Question

我有一个 div，我想完全覆盖一个页面。我不希望页面上显示任何内容。 div 应该覆盖在页面上并隐藏页面上的所有内容。为了创建这样的叠加层，我使用了以下 CSS:

.overlay {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 1000;
}

但是如果覆盖的页面太长，页面的某些部分仍然显示。我怎样才能使 div 完全覆盖页面？将位置设置为固定无济于事，因为叠加层有多页长，滚动条会被破坏。

Answer 1

您要用于覆盖 div 的 CSS 是这样的。

.overlay {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
}

这应该用黑色 div 完全覆盖页面。