位置绝对和高度为100%的叠加div不随滚动移动。

Question

请查看这里并单击“打开”按钮。

.darkClass
{
    background-color: white;
    filter:alpha(opacity=90); /* IE */
    opacity: 0.9; /* Safari, Opera */
    -moz-opacity:0.9; /* FireFox */
    z-index: 2000;
    height: 100%;
    width: 100%;
    background-repeat:no-repeat;
    background-position:center;
    position: absolute;
    top: 0;
    left: 0;

}

您将看到覆盖div按需要覆盖整个屏幕，但当我滚动时，它并没有像预期的那样随滚动移动。

我希望看到灰色覆盖移动与我的滚动。

我漏掉了什么CSS？

Answer 1

您应该使用position: fixed而不是position: absolute。

它将相对于浏览器窗口定位元素，而不是相对于它的第一个定位(非静态)祖先元素。

Answer 2

让覆盖层停留在顶部使用位置:固定。高度取决于屏幕的大小，而不是内容的大小。所以您的覆盖层填充了整个屏幕，而不是完整的内容。