1

我有一个弹出叠加层,我目前正在使用一些 jquery 代码调整其大小。我希望将此实现更改为仅适用于 CSS。这是我与jsFiddle一起使用的一般设置

<div id="BigDiv"></div>
<div id="Overlay"></div>

#Overlay{
    background:red;
    opacity:0.6;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%}

#BigDiv{
    height:2000px;
    width:2000px;
    background:blue;}

如您所见,叠加层的宽度和高度为 100%,因此当用户查看叠加层时,它会填满屏幕。但是,当用户滚动时,不会调整叠加层的大小。如果可能的话,我该如何更改它以使调整大小仅适用于 CSS。

谢谢。

4

1 回答 1

3

使用position:fixed而不是absolute将叠加层放置在

相对于屏幕视口的指定位置,滚动时不移动

您可以保留width:100%;height:100%或使用完整的top:0;right:0;bottom:0;left:0;定位系统 - 两者都应该使覆盖覆盖整个视口。

于 2013-06-20T23:45:52.110 回答