Z-index與之前的僞元素

Question

我已經用before-pseudo元素創建了'header'元素。 pseudeo元素必須位於父元素的後面。 一切都很好，直到我給我的'標題'一個Z索引。

我想要什麼：前景中的黃色「標題」，背景中的紅色僞元素以及黃色「標題」元素上簡單的z-index 30。

header { 
    background: yellow; 
    position:relative; 
    height: 100px; 
    width: 100px; 
    z-index:30; /*This is the problem*/ 
} 

header::before { 
    content:"Hide you behind!"; 
    background: red; 
    position:absolute; 
    height: 100px; 
    width: 100px; 
    top:25px; 
    left:25px; 
    z-index:-1; 
} 

您可以測試我的這個鏈接（http://jsfiddle.net/tZKDy/）上的問題，你看到的問題，當你設置/刪除去「頭」元素的z-index的。

Answer 1

::之前的僞元素放置在標題元素內。

CSS Spec：

的：前和：後，如果他們剛好插入其相關聯的元素中實元素僞元素與其他框交互。

設置的z-index爲頭元素creates a new Stacking Context，所以不能浮在頭元素後面創建的新的僞元素，因爲它會到堆疊內容外去。

我建議你簡單地在頭元素前面加上另一個元素，所以默認情況下它是正確堆疊的。 Example。