Trying to Adjust z-index so that lightbox covers entire browser screen

Question

I recently found an article that gave me code to create a lightbox effect. Here's the article: http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/

I realize this article was written in 2007, so maybe his explanation is no longer relevant.

Here's the problem, I have used his codes to create the lightbox effect, and tweaked them according to my needs. The only problem is, the "black overlay" section does not reach to the bottom of the browser.

In the article mentioned above, he explained that his code was supposed to create it so that the black overlay extended the entire width and height of the browser window and referenced the z-index to demonstrate this, but this is not the case for the height.

I have tried adjusting the z-index to be more than what it originally was, but nothing has worked so far. I've also tried searching for solutions, but again nothing I've tried has worked. Does anyone have any suggestions on how to get the black overlay to reach the bottom of the browser window? I tried this on a smaller screen (15") as well as mine (17") but the issue still remains. Thanks in advance for any help with this.

Here is a rough jsfiddle example and corresponding code:

<div id="container">
    <div class="random-element">
        <div class="fade"></div>
    </div>
    <div class="random-element"></div>
    <div class="random-element"></div>
    <div class="random-element"></div>
    <div class="random-element"></div>
    <div class="random-element"></div>
    <div class="random-element"></div>
</div>

And CSS:

#container {
    height: 1000px;
    width: 100%;
    background-color: #ffe;
    padding-top: 50px;
}

.random-element {
    margin: 50px 0 0 100px;
    height: 100px;
    width: 100px;
    background-color: #aff;
}

.fade {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background-color: #000;
    opacity: 0.5;
    z-index: 1001;
}

Answer 1

Change the CSS from absolute positioning to fixed positioning.

.fade {
    position: fixed;
}