23

before-pseudo 要素を使用して「header」要素を作成しました。疑似要素は親要素の後ろにある必要があります。「ヘッダー」に z-index を与える瞬間まで、すべてがうまく機能します。

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

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 を設定/削除すると問題が発生します。

4

2 に答える 2

33

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

CSS仕様：

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

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

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

于 2011-10-19T14:31:39.700 に答える