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 e.g. ‘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

Use position: fixed on your overlay elements (.black_overlay and .white_content) instead of position: absolute;