8

この動作を説明してください:

<div style="z-index: 1"></div>
<div></div>
<div></div>
<div></div>

div {
   position: relative;
   background: red;
   width: 100px;
   height: 100px;    
}

div:before {
    position: absolute;
    background: blue;
    width: 100px;
    height: 100px;  
    z-index: -1;
    content: "";
    left: -5px;
    top: -5px;
}

http://jsfiddle.net/2VexH/2/

唯一の違いは、最初の div に z-index: 1 セットがあることです。

4

1 に答える 1

23

z-index配置された要素を (初期値) 以外に設定するautoと、要素はその子孫ボックスの新しいスタック コンテキストを生成します。

div:beforeこれにより、疑似要素を含むその子孫が負の値であっても、そのz-index下に表示されなくなります。もちろん、負の子孫は、包含要素内でz-indexゼロまたは正の子孫の下に表示され続けますが、その包含要素は常に一番後ろにあります。1z-index

divセットを持たない残りの要素z-indexは、代わりに初期値を使用するため、疑似要素のスタック コンテキストを生成せず、疑似要素が実際の要素の下に表示されるようにします。それらが代わりに描画されるスタッキング コンテキストは、 のコンテキストですbody。

1 スタッキング コンテキスト ルートのコンテンツは、負の値を持つ子孫の背景の上に表示されることに注意してください。これは意図的なものであり、仕様への関連リンクとともに、この回答で詳しく説明されています。z-index

于 2012-07-29T19:06:53.560 に答える