我有一个电子邮件弹出窗口，当它触发时会有一个背景div“ grey out ”网站。问题是这个div只占用可见屏幕，如果用户决定滚动，他们可以看到“非灰色”网站的其余部分。
我做了一个小提琴来简化和重现问题（请参见上文），我也在下面列出了它的代码。我试图通过绝对定位让div占据整个屏幕（正如许多其他SO答案所暗示的那样），但是当存在其他div时，这种策略会失败。知道如何绕过它？
HTML：
<body>
<div class="other_things"></div>
<div id="full"></div>
<div class="other_things"></div>
<div class="other_things"></div>
<div class="other_things"></div>
</body>
CSS：
#full {
background: rgba(0,0,0,.6);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.other_things {width:40em; height: 50em;}
类似问题及其答案：
答案 0 :(得分：6)
不使用position：absolute，而是使用position：fixed将附加到窗口而不是最近的具有非静态位置的div。
#full {
background: rgba(0,0,0,.6);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.other_things {width:40em; height: 50em;}
答案 1 :(得分：0)
通过在body元素上添加相对定位，您强制top / bottom / left / right定义与此元素相关。因为您的body元素将具有总高度/宽度（包含所有块），所以您的叠加层将是正确的（并占用完整的可用空间）
以下是Jsfiddle的示例：http://jsfiddle.net/5MUTy/1/
答案 2 :(得分：0)
#full {
background: rgba(0,0,0,.6);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.other_things {width:40em; height: 50em;}