使用CSS重叠大小

Question

我有一个弹出式叠加层，我正在使用一些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。

感谢。

Answer 1

使用position:fixed代替absolute将覆盖置于

  

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

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