Question

I have an overlay element that gets appended to the document with JavaScript. Here is its style declarations:

#overlay_mask {
    display: none;
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 9999;
    width: 100%;
    height: 100%;
    background-color: #000000;
}

It’s size stretches to the height of the window correctly, but when the user scrolls, the overlay doesn’t follow.

The html and body elements are set to width: 100%; and height: 100%. The overlay is the first child of the document.

Answer 1

You can try position:fixed;. The overlay will still stretch to the size of your window only, but it will stay in position even if the user scrolls.