Z-index不适用于伪元素

Question

我已经看过其他答案，但无法专门查找示例。如果我使用a：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指数设置为:after以放入内部元素（.page-title）之下。

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

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