如何允许div覆盖整个页面而不是容器内的区域?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (19)

我正在试图制作一个半透明的div覆盖整个屏幕。我试过这个:

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

但是并不包括整个屏幕,它只覆盖了div内的区域。

提问于
用户回答回答于

添加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;

用户回答回答于

你需要的父元素设置100%以及

html, body {
    height: 100%;
}

另外,当你想要覆盖整个屏幕,看起来像你想要的dim,所以在这种情况下,你需要使用position: fixed;

#dimScreen {
    width: 100%;
    height: 100%;
    background:rgba(255,255,255,0.5); 
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100; /* Just to keep it at the very top */
}

如果是这样,那么你就不需要 html, body {height: 100%;}

扫码关注云+社区

领取腾讯云代金券