灯箱背景颜色应该使用CSS覆盖整个屏幕

Question

这是我的网页网址

http://sample.com/mytest.php

在此页面中,如果我们单击"登录"按钮,它将显示一个黑色背景的弹出屏幕.但是如果我们缩小页面,那么它会减小背景颜色的大小.但是如果我们缩小的话,我想覆盖整个屏幕的背景.我在页面中使用了以下代码.

.black_overlay{
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 2000%;
  background-color: black;
  z-index:1001;
  -moz-opacity: 0.8;
  opacity:.80;
  filter: alpha(opacity=80);
} 

但在测试页面中,以下代码用于覆盖整个背景.它工作正常.

<style type="text/css">
  /*give the body height:100% so that its child
    elements can have percentage heights*/
  body{ height:100% }
  /*this is what we want the div to look like*/
  div.fullscreen{
    display:block;
    /*set the div in the top-left corner of the screen*/
    position:absolute;
    top:0;
    left:0;
    background-color: black;
    /*set the width and height to 100% of the screen*/
    width:100%;
    height:100%;
    color: white;
  }
</style>

<div class="fullscreen">
  <p>Here is my div content!!</p>
</div>

我怎么能为我的登录页面背景做同样的事情我不知道.任何人都可以帮我解决这个问题.

Answer 1

尝试

div.fullscreen{
    position:fixed
    ...
}

绝对:该元件相对于它的第一被定位(未静态)祖先元素定位
固定:所述的元件被相对于浏览器窗口定位