css - 允许 div 覆盖整个页面而不是容器内的区域

Question

我试图让一个半透明的 div 覆盖整个屏幕。我试过这个:

#dimScreen
{
    width: 100%;
    height: 100%;
    background:rgba(255,255,255,0.5);
}

但这并没有覆盖整个屏幕，它只覆盖了 div 内的区域。

Answer 1

添加 position:fixed。然后封面固定在整个屏幕上，当您滚动时也是如此。
也可以添加 margin: 0; padding:0; 所以封面周围不会有一些空间。

#dimScreen
{
    position:fixed;
    padding:0;
    margin:0;

    top:0;
    left:0;

    width: 100%;
    height: 100%;
    background:rgba(255,255,255,0.5);
}

如果它不应该固定在屏幕上，请使用 position:absolute;

CSS Tricks还有一篇关于全屏属性的有趣文章。

编辑:
刚看到这个答案，所以我想补充一些额外的东西。
喜欢Daniel Allen Langdon在评论中提到，添加 top:0; left:0; 可以肯定的是，封面贴在屏幕的最上方和左侧。

如果您希望某些元素位于封面的顶部(因此它不会覆盖所有内容)，请添加 z-index。数字越大，它涵盖的级别越多。