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/