【CSS】z-indeの基本の使い方、要素の重なり順を指定する｜HTML＆CSS入門講座（16）

目　次

はじめに
z-indexとは？
z-indexの基本の使い方
おわりに

はじめに

　HTML＆CSS入門講座の第十六弾として、【CSS】z-indexの基本の使い方ついて紹介します。

　この記事を読むと次の疑問について知ることができます。

●z-indexとは？・
●z-indexの基本的な使い方はどうするの？
・z-indexの取れる値と書き方
・z-indexを指定せずに要素5つを作成した場合
・z-indexを指定して要素5つを作成した場合
・最初の要素のみposition:absoluteを取った場合
・2つのスタックコンテキストを作り各々でz-indexを指定した場合

　HTML＆CSS入門講座（15）では、【CSS】positionの使い方について解説してきました。

　ここでは【CSS】z-indexの基本の使い方について深堀していきます。

z-indexとは？

　z-indexは、簡単に言ってしまえばWeb文書内の要素の重なりの順番を指定できるプロパティです。

　しかし、Web文書のHTML内は、実を言うと何層にもなっている場合があり、同一の層内での要素の順位を指定するのがz-indexということになります。

　この層に相当するスタックコンテキストとスタックレベルについて簡単に解説します。

　HTML文書には、何も指定していなければ大元の層（ルートスタックコンテキスト）が存在します。

　そして、HTML内のある要素に対して、次のようなプロパティなどを指定すると新たにスタックコンテキストが生成されますが、その中で主要なものを次の載せます。

positionの値がabsoluteあるいはrelativeで、かつz-indexの値がauto以外の場合
position の値が fixed あるいは stickyの場合
display: flexあるいはdisplay: gridの子要素で、かつz-indexの値がauto以外の場合
opacityの値が1以外の場合
mix-blend-modeの値がnormal以外の場合
transform、filter、perspective、clip-path、mask、mask-image、mask-borderの値がnone以外の場合
will-changeの値がauto以外で上記のようなプロパティを指定している場合

　このようにスタックコンテキストが生成された際にそのスタックコンテキスト内の要素の重なり順番を指定するのがスタックレベル＝z-indexと言うことになります。

　したがって、大元のルートスタックコンテキストがあり、その中に幾つかのスタックコンテキストがある場合は、そのスタックコンテキストで比較されて重なり順位が決まり、あるスタックコンテキスト内の要素の重なり順を決めるのがz-indexとなります。

　例えば、Xのスタックコンテキスト内で要素（要素A、B、C）の重なり順番はz-indexで指定できますが、Yと言うスタックコンテキスト内での重なり順位は、Yのスタックコンテキスト内で指定した要素（要素D、E）の重なり順番であるz-indexの指定順となりますので、このスタックコンテキストの概念をしっかりと頭にたたき込む必要があります。

z-indexの基本の使い方

z-indexの取れる値と書き方

　z-indexは、初期値はautoになっています。

　そして、スタックコンテキスト内での重なりの順番を決めるz-indexの取れる値は、32ビットの符号付整数値の範囲（-2の31べき乗～2の31べき乗（-2147483647～2147483647）となります。数値の大きい方が重なり順番が上になります。

　z-indexの書き方は、次の通り

セレクタ {z-index:32ビットの符号付整数値;｝
ここに
32ビットの符号付整数値　：　-2147483647～2147483647
小数点の値はＮＧです。

z-indexを指定せずに要素5つを作成した場合

　それでは、最初にz-indexを指定せずに要素A～要素Eまで作成した場合どうなるかを見てみましょう。

See the Pen csszindex01 by Eyanai (@yeiji72) on CodePen.

　各要素の重なりは、HTMLのコードに書いた順序に表示され、最後に書いた要素Eが一番上に表示されたことが分かります。

z-indexを指定せずに要素5つを作成した場合の重なり順

重なり上

要素Ｅ
要素Ｄ
要素Ｃ
要素Ｂ
要素Ａ

重なり下

z-indexを指定して要素5つを作成した場合

　今度は、最初から重なり順を指定して見ましょう。

　重なり順序を次のように指定して見ます。

要素A(z-index:100)>要素C(z-index:80)>要素E(z-index:60)>要素B(z-index:40)>要素D(z-index:20)

See the Pen csszindex02 by Eyanai (@yeiji72) on CodePen.

　如何ですか？、ちょっと分かりずらいですが、要素A（スカイブルー）一番上で、次に要素C(青)、三番目が要素E（オレンジ)、4番目が要素B(緑)、そして一番下に要素D(赤)が描かれているのが分かります。

z-indexを指定して要素5つを作成した場合の重なり順

重なり上

要素Ａ（z-index：100）
要素Ｃ（z-index：80）
要素Ｅ（z-index：60）
要素Ｂ（z-index：40）
要素Ｄ（z-index：20）

重なり下

最初の要素のみposition:absoluteを取った場合

　それでは、次に要素Cのみposition:absoluteを取って、初期値であるposition:staticにしたらどのようになるか見てみましょう。

See the Pen by Eyanai (@yeiji72) on CodePen.

　要素Aにz-indexを100に指定していても、一番おもてに表示されずに、一番底に行ってしまいました。

　つまり、positon:staticになると、z-indexが効かないことを示しています。

最初の要素のみposition:absoluteを取った場合の重なり順

重なり上

要素C（z-index：80）
要素Ｅ（z-index：60）
要素B（z-index：40）
要素D（z-index：40）
要素A（z-index：100、positon:staticのためにz-indexが効かない）

重なり下

2つのスタックコンテキストを作り各々でz-indexを指定した場合

　ここでは、2つのスタックコンテキストを作成し、各々でz-indexを指定した場合にどのようになるかを見ていきましょう。

それぞれを指定した値は、次の通り

Group01　z-index：10;
- 要素A　z-index：100;
- 要素B　z-index：40;
- 要素C　z-index：80;
Group01　z-index：5;
- 要素D　z-index：70;
- 要素E　z-index：60;

以上のように設定した場合、重なりの順番は次のようになります。

See the Pen csszindex04 by Eyanai (@yeiji72) on CodePen.

　この結果は、Group01（z-index：10）と、Group02（z-index：5）を比較すると、Group01の方がz-indexが大きいので、Group02より上に表示され、Group01の中では、z-indexの数値の大きい順の要素A（z-index：100）＞要素C（z-index：80）＞要素B（z-index：40）の順に表示され、Group２の中では、z-indexの数値の大きい順の要素D（z-index：70）＞要素E（z-index：60）の順に表示されていることが分かります。

2つのスタックコンテキストを作り各々でz-indexを指定した場合の重なり順

重なり上

Group01（z-index：10）の要素A（z-index：100）
Group01（z-index：10）の要素C（z-index：80）
Group01（z-index：10）の要素B（z-index：40）
Group02（z-index：5）の要素D（z-index：70）
Group02（z-index：5）の要素E（z-index：60）

重なり下

おわりに

　如何だったでしょうか？

　z-indexとは？、z-indexの基本的な使い方はどうするの？、z-indexの取れる値と書き方、z-indexを指定せずに要素5つを作成した場合、z-indexを指定して要素5つを作成した場合、最初の要素のみposition:absoluteを取った場合、2つのスタックコンテキストを作り各々でz-indexを指定した場合などについて解説してきました。

　この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。

以上です。