禁用覆盖整页

Question

我想创建一个我将在弹出窗口后面使用的叠加层。但是当页面向下滚动时，叠加层不再存在？我可以使用javascript来获取页面内容的高度，然后可以将相同的高度应用于叠加层，但是有没有基于CSS的解决方案？

#overlay{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
   top: 0px;
   background-color:#000;
   opacity: .75
}

Answer 1

只需将position属性更改为fixed。

Answer 2

position必须为fixed并且还要防止堆叠问题添加z-index: 9999999;
的 demo on dabblet.com

#overlay{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color:#000;
    opacity: .75;
    z-index: 9999999;
}