Z-index 不适用于伪元素

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 不适用于伪元素

Z-index not working on pseudo elements

css

z-index