Question

我看过其他答案，但无法专门找到一个例子。如果我使用：before或：after伪元素作为具有绝对位置的叠加层，是否可以更改父容器内元素的z-index以使它们位于叠加层之上。我已经创建了一个基本的例子，任何帮助都会非常感激，因为我很难理解如何让z-index在这种情况下正常工作：

结构示例如下：

<div class="page-banner">
<div class="container">
     <h2 class="page-title">Shop</h2>
</div>

CSS如下：

.page-banner {
    position: relative;
    z-index: 1;
    height: 100%;
    background-image: url('http://placehold.it/1920x500'); background-size: cover;
}

.page-banner .page-title {
    z-index: 150;
}

.page-banner:after {
    position: absolute;
    left: 0;
    content:"";
    top: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    height: 100%;
    z-index: 1;
}

http://jsfiddle.net/webidia/co9u3vqa/1/

Answer 1

将负z-index设置为:after以放入内部元素（.page-title）下。

.page-banner:after {z-index: -1}

http://jsfiddle.net/co9u3vqa/5/

Z-index不处理伪元素

1 个答案: