javascript - 整页叠加出现在后面

Question

我正在尝试使用 bootstrap 创建一个简单的整页覆盖。

但是叠加层出现在我的主要内容“后面”(示例中的蓝色框)。

我确定我遗漏了一些非常明显的东西，但我们将不胜感激。

我需要在任何地方点击页面时覆盖消失，这是有效的。

我已经包含了我当前的代码和一个 jsfiddle .可以看到overlay在蓝色框的后面，好像是先加载？

HTML

<div class="overlay overlay-data">
    <p>click anywhere to close this overlay</p>
</div>

<div class="col-md-4">
    <div class="menu-item blue">
        <p>MY INFO BOX</p>
    </div>
</div>

JS

$(document).ready(function () {
    $(".overlay").addClass('overlay-open');
    $("section").addClass('blur');
});

$(document).on('click', '.overlay', function () {
    $(".overlay").removeClass('overlay-open');
    $("section").removeClass('blur');
});

CSS

.blur {
    -webkit-filter: blur(2px);
}
.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #000;
}
.overlay p {
    text-align: center;
    position: relative;
    top: 20%;
    height: 60%;
    font-size: 80px;
}
.overlay-data {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    visibility: 0s 0.5s;
    transition: opacity 0.5s, visibility 0s 0.5s;
}
.overlay-open {
    opacity: 0.5;
    visibility: visible;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}
.blue {
    background: #28ABE3;
}
.menu-item {
    padding-top: 45px;
    padding-bottom: 45px;
    margin-bottom: 45px;
    transition: all 0.3s;
    border: 5px solid transparent;
}

Answer 1

在您的 css 中指定 z-index 大于您的主要内容。

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 1;
}

JSFiddle

在 MDN 上阅读更多相关信息，z-index .