Question

请查看here并点击“开启”按钮。

.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

让Overlay保持在最高使用位置：固定。高度取决于屏幕的大小，而不是内容的大小。因此，您的叠加层会填满整个屏幕，而不是完整的内容

位置绝对和高度100％叠加div不随滚动移动

2 个答案: