Z-Indexの説明:CSSを使用して要素をスタックする方法

私はいつもCSSプロパティz-indexに苦労してきました。最初はとても簡単に聞こえます。z-index値が高い要素は、z-index値が低い要素の前に表示されます。それでも、z-index値がまったく効果がないように見える状況に陥ることがよくあります。

z-indexには十分な試行錯誤があり、理解を深めたいと思いました。この記事がお役に立てば幸いです。そうすれば、なぜz-indexが期待どおりに機能しないのか不思議に思うことはありません。

デフォルトのスタック順序

まず、z-indexが適用されていない場合の、ブラウザが要素をスタックするデフォルトの順序について説明します。

  1. ルート要素(要素)
  2. 定義された順序で配置されていない要素
  3. 定義された順序で要素を配置

非配置要素は、デフォルトの位置値が静的な要素です。配置された要素は、他の位置値を持つ要素です。他の値の例は、絶対、相対、スティッキー、または固定です。

HTML:

CSS:

/* This is only the CSS that is relevant for the example. For the complete CSS check the links below the pictures. */
.blue, .pink, .orange { position: absolute;}

ドキュメントの最後に緑色のボックスを定義しました。それでも、配置されていないため、他の後ろに表示されます。

z-indexとのスタッキング

これらの要素のスタック順序を変更する場合は、プロパティz-indexを使用できます。z-indexが高い要素は、z-indexが低い要素の前に表示されます。注意すべき点の1つは、z-indexは配置された要素でのみ機能することです

.blue, .pink, .orange { position: absolute;}
.blue { z-index: 2;}
.orange { z-index: 3;}
.green { z-index: 100; // has no effect since the green box is non- positioned}

青いボックスの前に、z-indexが高いオレンジ色のボックスが表示されます。

スタッキングコンテキスト

ピンクのボックスの後ろに配置する別の配置ボックスをレイアウトに追加するとします。コードを次のように更新します。

HTML:

CSS:

.blue, .pink, .orange, .purple { position: absolute;}
.purple { z-index: 0;}
.pink { z-index: 1;}
.blue { z-index: 2;}
.orange { z-index: 3;}
.green { z-index: 100;}

予想通り、ピンクのボックスが紫色のボックスの前に表示されていますが、オレンジ色のボックスはどうなりましたか?z-indexが高いのに、なぜ青いものの後ろに突然あるのですか?これは、要素にz-index値を追加すると、いわゆるスタッキングコンテキストが形成されるためです。

ピンクのボックスには、新しいスタッキングコンテキストを形成するauto以外のz-index値があります。スタッキングコンテキストを形成するという事実は、その子要素がどのように表示されるかに影響します。

ピンクのボックスの子要素のスタック順序を変更することができます。ただし、それらのz-indexは、そのスタッキングコンテキスト内でのみ意味を持ちます。つまり、オレンジ色のボックスは同じスタッキングコンテキスト内にないため、青いボックスの前に移動することはできません。

青いボックスとオレンジのボックスを同じスタッキングコンテキストの一部にしたい場合は、青いボックスをピンクのボックスの子要素として定義できます。これにより、青いボックスがオレンジのボックスの後ろに表示されます。

スタッキングコンテキストは、要素にz-indexを適用するときに形成されるだけではありません。要素にスタッキングコンテキストを形成させる他のいくつかのプロパティがあります。例としては、フィルター、不透明度、変換などがあります。

前の例に戻りましょう。青いボックスもピンクのボックスの兄弟です。今回は、ピンクのボックスにz-indexを追加する代わりに、フィルターを適用します。

HTML:

CSS:

.blue, .pink, .orange { position: absolute;}
.pink { filter: hue-rotate(20deg);}
.blue { z-index: 2;}
.orange { z-index: 3;}
.green { z-index: 100;}

オレンジ色のボックスはまだ青いボックスよりも高いz-indexを持っていますが、その後ろに表示されています。これは、フィルター値によってピンクのボックスが新しいスタッキングコンテキストを形成したためです。

概要

配置された要素にz-indexを使用することで、デフォルトのスタック順序を変更できます。

特定のCSSプロパティを適用すると、要素はスタッキングコンテキストを形成できます。Zインデックス値は、同じスタッキングコンテキスト内でのみ意味を持ちます。

z-indexの詳細については、この記事をお勧めします。これを書いているとき、私はそれから多くのインスピレーションを得ました。

読んでくれてありがとう!:)