Css 尝试调整z索引以使lightbox覆盖整个浏览器屏幕

我最近发现了一篇文章，给了我创建灯箱效果的代码。以下是文章：

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

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

在上面提到的文章中，他解释说他的代码应该创建它，以便黑色覆盖扩展浏览器窗口的整个宽度和高度，并引用z索引来演示这一点，但高度不是这样

我已经尝试过调整z指数，使其比原来更大，但到目前为止没有任何效果。我也尝试过寻找解决方案，但同样地，我尝试过的都没有成功。有人对如何让黑色覆盖层到达浏览器窗口底部有什么建议吗？我在一个更小的屏幕（15英寸）和我的（17英寸）上试过这个，但问题仍然存在。提前感谢您在这方面的帮助

下面是一个粗略的对应代码：

<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从绝对定位更改为固定定位

.fade {
    position: fixed;
}

---

请提供相关代码，或设置JSFIDLE。链接到站点是不好的，因为当这个问题解决了，或者站点消失了，这个问题（以及它的答案）将不再有用。此外，这个问题不起作用的原因与z-index无关。相反，这是因为您的

fade

元素是div的子元素，而它需要是

body

的直接子元素，才能使您的

身高：100%

正常工作。请注意，如果您利用Firefox的Firebug等调试工具，您将能够相当快地看到/找到这一点。不要鼓励回答像这样糟糕的问题。这个问题现在就结束了，将来对任何人都没有用处。明白了。我真的没想过。大家好。非常感谢您的解释、问题建议和回答。我在这里还是新手，正在学习发布问题的最佳方法，因此我肯定会调整我的问题，以便更好地为社区服务。你的回答很有效，我会记下来的。请原谅我的知识不足，我一定会努力使我的问题在未来更加有益。

.fade {
    position: fixed;
}