允许div覆盖整个页面，而不是容器中的区域 [英] Allow a div to cover the whole page instead of the area within the container

问题描述

我试图做一个半透明的div覆盖整个屏幕。我尝试过：

  #dimScreen 
 {
 width：100％; 
 height：100％; 
 background：rgba（255,255,255,0.5）; 
} 
  

但这并不覆盖整个屏幕，

添加 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技巧也有一个关于全屏属性的有趣文章。

编辑：

刚刚遇到这个答案，所以我想添加一些额外的东西。

Like Daniel Allen Langdon 评论中提到，添加 top：0;

如果你有一些元素在屏幕的顶部和左边， （因此它不覆盖一切），然后添加 z-index 。数字越高，其涵盖的级别越多。

I'm trying to make a semi-transparent div cover the whole screen. I tried this:

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

But that doesn't cover the whole screen, it only covers the area within the div.

解决方案

Add position:fixed. Then the cover is fixed over the whole screen, also when you scroll.
And add maybe also margin: 0; padding:0; so it wont have some space's around the cover.

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

    top:0;
    left:0;

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

And if it shouldn't stick on the screen fixed, use position:absolute;

CSS Tricks have also an interesting article about fullscreen property.

Edit:
Just came across this answer, so I wanted to add some additional things.
Like Daniel Allen Langdon mentioned in the comment, add top:0; left:0; to be sure, the cover sticks on the very top and left of the screen.

If you some elements are at the top of the cover (so it doesn't cover everything), then add z-index. The higher the number, the more levels it covers.

这篇关于允许div覆盖整个页面，而不是容器中的区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！