css - 尝试调整 z-index 以便灯箱覆盖整个浏览器屏幕

Question

我最近发现一篇文章为我提供了创建灯箱效果的代码。这是文章:http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/

我知道这篇文章写于 2007 年，所以他的解释可能不再相关。

这就是问题所在，我已经使用他的代码来创建灯箱效果，并根据我的需要进行了调整。唯一的问题是，“黑色覆盖”部分没有到达浏览器的底部。

在上面提到的文章中，他解释说他的代码应该创建它以便黑色覆盖扩展浏览器窗口的整个宽度和高度并引用 z-index 来演示这一点，但事实并非如此对于高度。

我已经尝试将 z-index 调整为比原来更多的值，但到目前为止没有任何效果。我也尝试过寻找解决方案，但我尝试过的任何方法都没有奏效。有没有人对如何让黑色覆盖层到达浏览器窗口底部有任何建议？我在较小的屏幕 (15") 和我的屏幕 (17") 上都试过了，但问题仍然存在。在此先感谢您提供的任何帮助。

这是粗略的 jsfiddle example以及相应的代码:

<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>

和 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

将 CSS 从绝对定位更改为固定定位。

.fade {
    position: fixed;
}