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

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構成の実装

推薦する

シンプルな虫眼鏡効果を実現するJavaScript

大きな箱の中に写真があります。マウスをその上に置くと、半透明のマスク レイヤーが表示されます。マウス...

Dockerコンテナが起動直後に終了する問題を解決する

最近、Docker がコンテナの起動時に特定のプロセスを直接実行できるようにする方法を調べていたとこ...

JavaがMySQL 8.0に接続できない問題の解決策

この記事では、参考までにMySQL 8.0に接続できないJavaの問題をまとめて紹介します。具体的な...

JSにおけるnewの原理と実装について詳しく話しましょう

目次意味コンストラクタ本体は異なる戻り値なし戻りオブジェクト非オブジェクトを返すプロパティバインディ...

MySQL で時刻と日付の型を保存する際の選択問題を分析する

一般的なアプリケーションでは、timestamp、datetime、int 型を使用して時間形式を保...

タブ効果を実現する js 開発プラグイン

この記事の例では、タブ効果を実現するためのjsプラグインの具体的なコードを参考までに共有しています。...

テキストの両側に水平線を描くための CSS のサンプルコード

この記事では、テキスト中央の両側に水平線を引く効果を実現する CSS のサンプルコードを紹介し、皆さ...

Nginx http ヘルスチェック構成プロセス分析

パッシブチェックパッシブ ヘルス チェックでは、NGINX と NGINX Plus はイベントの発...

jQueryとCSSを組み合わせてトップに戻る機能を実現

CSS操作 CS $("").css(名前|プロ|[,値|関数]) 位置$(&q...

ナビゲーションデザインと情報アーキテクチャ

<br />ナビゲーションについて話すときは、ほとんどの場合、ナビゲーションがコンテンツ...

VirtualBox Centos7 の NAT+ホストオンリーネットワークの落とし穴のまとめ

目次1. 問題の背景2. 仮想マシン ネットワーク カードの接続方法は何ですか? 2.1 NAT 2...

CSSスタイルシートとフォーマットレイアウトの詳細な説明

スタイルシートCSS (カスケーディング スタイル シート) は、HTML Web ページを美しくす...

HTML テーブル マークアップ チュートリアル (48): CSS で変更されたテーブル

<br />では、CSS 構文を巧みに使用してテーブルを美しくする方法を見てみましょう。...

Linux システムの最適化 (カーネルの最適化) に関するいくつかの提案

スワップを無効にするサーバーがデータベース サービスまたはメッセージ ミドルウェア サービスを実行し...

nginx で SSL 証明書を設定して https サービスを実装する方法

前回の記事では、openssl を使用して無料の証明書を生成した後、この証明書を使用してローカル ノ...