BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル]z-indexの違い。cssのz-index: 0とz-index: autoの違い。

2022-01-21 16:52:51

最近、カスケードコンテキストの勉強をしていたのですが、その過程で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>
<head>
  <title> z-index is 0 or auto</title>
  <style>
    .red,
    .blue{
      width: 200px;
      height: 200px;
    }

    .red {
      position: absolute;
      z-index: 0;
      top: 100px;
      left: 100px;
      background: #FF0000;
    }
    .blue {
      position: absolute;
      z-index: auto;
      top: 40px;
      left: 40px;
      background: #0000FF;
    }
  </style>
</head>

<body>
  <div class="red">
    index-0
  </div>
  <div class="blue"> index-auto</div>
</body>
</html>

このコードの結果は、:

青い要素が赤い要素に重なり、文書内の赤と青のブロックの順序が次のように入れ替わっていることがわかります。 

<div class="blue">index-auto</div>
<div class="red">
  index-0
</div>

を取得することが可能です。

この時点で、赤の要素は青の要素の上に再び重なっています。z-indexの値が0またはautoの場合、カスケードコンテクスト内の要素の順序に影響を与えないという結論が得られます。
これに加えて、MDNドキュメントでこんな一文も見かけました。

z-indexが指定されていない場合、すべての要素はデフォルトのレベル（レベル0）でレンダリングされます。

つまり、autoと0は同じレイヤーです。
そして、上のコードの青いブロックの後に、新しい緑のブロックを追加してください。 

<div class="green">don't set z-index</div>
 
.green {
  position: absolute;
  top: 160px;
  left: 160px;
  background: greenyellow;
}

この時点でページはこのようになっています。

z-indexの値が緑色で設定されていない。一般的なブラウザの位置が静止しておらず、z-indexが設定されていない場合、z-indexはauto、IE6/7ではz-indexは0となります。
緑は最後の要素として表示され、青と赤の両方の要素を上書きします。

z-index: 0 はカスケードコンテキストの作成

では、red 要素が z-index:0 のためにカスケード・コンテキストを作成することを検証してみましょう。test要素をred要素に追加します。 

<div class="test"></div>
 
.test {
  width: 140px;
  height: 140px;
  position: absolute;
  right: 0px;
  top: 0px;
  background: grey;
  z-index: 10;
}

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

グレーのテストブロックは、青と緑のブロックに覆われています。
test 要素の z-index が 10 であっても、カスケードコンテキストの最上位に表示できないことは明らかでしょう。これは、testが親要素であるredによって作成されたカスケードコンテキストの一部であるためです。要素がカスケードコンテクストを作成する場合、その子カスケードコンテキストの z-index 値は親レベルでしか意味を持ちません。すべての灰色のブロックのz-indexは、赤のブロックの中でしか有効ではありません。

z-index: auto はカスケードコンテクストを作成しない。

では次に、このテスト要素を青いブロックの中で試してみるとどうでしょうか。(青い要素のz-indexはautoです)

グレーの要素がすべての要素の一番上に表示され、z-index 値が有効になっていることがわかりますね この時点で、test 要素はルート要素によって作成されたカスケードコンテキストの一部になっています（カスケードコンテキストの階層構造では、カスケードコンテキストを作成しない要素は、親と同じカスケードコンテキストにあります。青いブロックはカスケード・コンテキストを持たず、その親であるルート要素と同じカスケード・コンテキストにあります）。赤い要素もルート要素によって作成されたカスケード コンテキストにありますが、赤い要素の z-index は 0 で 10 未満なので、灰色のブロックが一番上にあります。

要約すると

  • z-indexの値が設定されていない場合、デフォルトのレイヤーはautoになります。
  • z-index: 0とz-indexが定義されていない場合（z-index: auto）は、同じレベル内で階層がなく、ドキュメントフローで後に現れるものが先に現れるものを上書きします。
  • z-index: 0 はカスケードコンテクストを作成します z-index: auto はカスケードコンテクストを作成しません。

この記事では、z-index.の違いについて説明します。cssのz-index: 0とz-index: autoの違いについては、この記事にまとめています。z-index.の詳細については、こちらをご覧ください。0とz-index: autoについては、スクリプトハウスの過去記事を検索していただくか、引き続き以下の関連記事をご覧ください！今後ともスクリプトハウスをよろしくお願いいたします。 

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します