web-dev-qa-db-ja.com

疑似要素の前のZインデックス

Before-pseudo要素を使用して「header」要素を作成しました。 pseudeo要素は親要素の後ろにある必要があります。 「ヘッダー」にz-indexを付けるまで、すべてがうまく機能します。

私が欲しいもの：前景の黄色の「ヘッダー」、背景の赤い疑似要素、黄色の「ヘッダー」要素の単純なz-index30。

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/ ）で私の問題をテストでき、de'header '要素のz-indexを設定/削除すると問題が発生します。

cssz-indexpseudo-element
20
Tom Claus

:: before疑似要素はヘッダー要素内に配置されます。

CSS仕様 ：

：beforeおよび：after疑似要素は、関連する要素のすぐ内側に挿入された実際の要素であるかのように、他のボックスと相互作用します。

ヘッダー要素のz-indexを設定する 新しいスタッキングコンテキストを作成します したがって、作成した新しい疑似要素は、そのスタッキングコンテキストの外に出なければならないため、ヘッダー要素の後ろに浮かぶことはできません。

ヘッダー要素の前に別の要素を配置することをお勧めします。これにより、デフォルトで正しくスタックされます。 例 。

32
RC-1290'Dreadnought'