CSS における z-index: 0 と z-index: auto の違い

最近、スタックコンテキストについて学習しています。学習の過程で、z-index が 0 の場合と auto の場合の違いについて疑問があったので、Baidu で情報を調べました。いくつか問題点を見つけたので、自分の実践（実験？）に基づいてこのメモをまとめました。

訂正

情報を調べていたところ、z-index が 0 の場合、新しいスタックコンテキストが作成され、0 は auto より上になるという説があることに気付きました。文の後半部分は間違っています。z-index: 0 と z-index が設定されていない、つまり z-index: auto は、同じ階層内で高低の区別がありません。ドキュメントフローで後から表示されるものが、前に表示されるものを上書きします。

z-index: 0 または z-index: auto を設定すると、ドキュメントフロー内で後から表示される要素が、前に表示される要素を覆います。

実験してみましょう

<!DOCTYPE html>
<html>
<ヘッド>
  <title>z-index は 0 または auto です</title>
  <スタイル>
    。赤、
    。青{
      幅: 200ピクセル;
      高さ: 200px;
    }

    。赤 {
      位置: 絶対;
      zインデックス: 0;
      上: 100px;
      左: 100px;
      背景: #FF0000;
    }
    。青 {
      位置: 絶対;
      zインデックス: 自動;
      上: 40px;
      左: 40px;
      背景: #0000FF;
    }
  </スタイル>
</head>

<本文>
  <div class="red">
    インデックス-0
  </div>
  <div class="blue">インデックス自動</div>
</本文>
</html>

このコードの結果は次のようになります。

青い要素が赤い要素を覆っていることがわかります。ドキュメント内の赤い要素ブロックと青い要素ブロックの順序は次のように入れ替わります。

<div class="blue">インデックス自動</div>
<div class="red">
  インデックス-0
</div>

取得できる

このとき、赤い要素が再び青い要素を覆います。 z-index 値が 0 または auto の場合、スタックコンテキスト内の要素の順序には影響がないことがわかります。
さらに、MDN ドキュメントで次の文も見ました。

z-index が指定されていない場合、すべての要素はデフォルトのレイヤー (レイヤー 0) にレンダリングされます。

つまり、auto と 0 は同じレイヤー上にあります。
上記のコードの青いブロックの後に緑のブロックを追加しましょう。

<div class="green">Z-index を設定しないでください</div>
 
。緑 {
  位置: 絶対;
  上: 160px;
  左: 160px;
  背景: 緑黄色;
}

ページは次のようになります。

緑色には z-index 値が設定されていません。通常、ブラウザの位置が静的ではなく、z-index が設定されていない場合、z-index は自動になり、IE6/7 では z-index は 0 になります。
最後に表示される要素である緑は、青と赤の両方の要素をカバーします。

z-index: 0 はスタックコンテキストを作成します

ここで、z-index: 0 のため、赤い要素にスタックコンテキストがあることを確認しましょう。赤い要素にテスト要素を追加します

<div class="test"></div>
 
。テスト {
  幅: 140ピクセル;
  高さ: 140px;
  位置: 絶対;
  右: 0px;
  上: 0px;
  背景: グレー;
  zインデックス: 10;
}

現時点では、ページは次のようになります

灰色のテストブロックは、青と緑のブロックで覆われています。
当然ですが、テスト要素の z-index が 10 であっても、スタッキングコンテキストの上部に表示することはできません。 test は親要素 red によって作成されたスタックコンテキストに属しているためです。要素がスタッキングコンテキストを作成すると、その子スタッキングコンテキストの z-index 値は親のコンテキスト内でのみ意味を持ちます。灰色のブロックのすべての Z インデックスは、赤色のブロック内でのみ有効です。

z-index: auto はスタックコンテキストを作成しません

では、このテスト要素を青いブロックに入れて試してみてはいかがでしょうか? （青い要素のz-index値はautoです）

灰色の要素が全ての要素の上に表示されており、z-index値が有効になっていることがわかります。この時点で、テスト要素はルート要素によって作成されたスタッキングコンテキストに属します (スタッキングコンテキストの階層では、スタッキングコンテキストを作成しない要素は、親と同じスタッキングコンテキストにあります。青いブロックはスタッキングコンテキストを作成せず、親であるルート要素と同じスタッキングコンテキストにあります)。赤い要素もルート要素によって作成されたスタッキングコンテキストに属しますが、赤い要素の z インデックスは 0 で 10 未満であるため、灰色のブロックが一番上にあります。

要約する

z-index 値が設定されていない場合、デフォルトは auto になります。デフォルトのレイヤーはレイヤー 0 です。
同じ階層内で、z-index: 0 と z-index が定義されていない (つまり z-index: auto) の間には違いはありません。ドキュメントフローで後から表示されるものが、前に表示されるものを覆います。
z-index: 0 はスタックコンテキストを作成します。z-index: auto はスタックコンテキストを作成しません。

CSSにおけるz-index: 0とz-index: autoの違いについての記事はこれで終わりです。z-index: 0とz-index: autoの違いについてさらに詳しく知りたい方は、123WORDPRESS.COMの過去記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

<<: ウェブページが自動的にデュアルコアブラウザの高速モードを呼び出すようにします（Webkit）

>>: ローカル画像サーバーのNginx構成の実装