Question

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

我意识到这篇文章写于2007年，所以也许他的解释不再相关。

问题在于，我使用他的代码来创建灯箱效果，并根据我的需要调整它们。唯一的问题是，＆＃34;黑色覆盖＆＃34;部分没有到达浏览器的底部。

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

我已经尝试将z-index调整为比原来的更多，但到目前为止还没有任何工作。我也尝试过寻找解决方案，但我所尝试过的任何事情都没有奏效。有没有人对如何让黑色叠加层到达浏览器窗口的底部有任何建议？我在一个较小的屏幕（15＆＃34;）和我的（17＆＃34;）上尝试了这个，但问题仍然存在。在此先感谢您的帮助。

这是一个粗略的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;
}

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

1 个答案: