CSS不会填充视图端口

Question

I have a div overlay which pops up when a link is clicked, my problem is you have to scroll to click the link, then the overlay remains at the top of the page instead of the area the user is currently looking at.

You can see it here by scrolling down and clicking on any of the links eg 'multiple orders 'here' and the terms and conditions at the bottom.

Here is the CSS:

  .black_overlay{
        display: none;
        position: absolute;
        /*top: 0%;
        left: 0%;
        width: 100%;
        height: 1000px; */
        top: 0px;
        right: 0px;
        left: 0px;
        bottom: 0px;
        height: 100%;


        background-color: black;
        z-index:1001;
        -moz-opacity: 0.8;
        opacity:.80;
        filter: alpha(opacity=80);
   }
 .white_content {
        display: none;
        position: absolute;
        top: 25%;
        left: 25%;
        width: 50%;
        height: 50%;
        padding: 16px;
        border: 5px solid blue;
        background-color: white;
        z-index:1002;
        overflow: auto;
  }

And the JavaScript:

<a href = "javascript:void(0)" onclick =    "document.getElementById('light3').style.display='block';document.getElementById('fade').style.display='block'">here</a>

Answer 1

使用position: fixed在叠加层元素（ .black_overlay和.white_content ）上，而不是position: absolute;