CSSで要素が重なりあう場合、z-indexを使用する場合があります。
z-indexはCSSで要素の重なりについて指定されるCSSプロパティですが、使用する際にはいくつかポイントがあるのをご存じでしょうか。
これらポイントを知らずにz-indexを指定していると、ふとした時に「あれ？z-indexが効かない…」といったトラブルが起きることがあります。
今回はそんなz-indexとは何か、z-indexの基本と使い方、効かない時のポイントについて解説していきたいと思います。
z-indexとは
z-indexは要素の重なり順を指定するCSSプロパティです。
Webページは一枚の紙のようにも見えますが、実際にはいくつもの層（レイヤー）から構築されており、それぞれ重なっている状態になります。
当然ですが、上に露出しているものが実際に見えるものであり、見えないものは別の要素の下になっているなど見えていない場合があります。
このように要素の重なり順を指定するのに、CSSではz-indexプロパティを用います。
z-indexの書き方
z-indexは以下のように記述します。
.selector {
z-index: 10;
}数字が大きくなるほど上に表示される
z-indexは数字が大きくなるほど上に表示されます。
つまり、z-index: 10;の要素より、z-index:20;の要素のほうが上に表示されます。
z-indexの使用シーン
z-indexの使用シーンとしては、positionなどで、要素を重ねた時などに重なり順を指定するのに利用したりすることが多いです。
z-indexを指定していない時の重なり順は？
通常要素というのは、後から書かれたものが上に来るようになります。
ただし、positionプロパティが指定されている場合は、少し挙動が違います。
以下、positionプロパティがついた要素の重なり順のサンプルになります。
See the Pen JjdzeXx by JAJAAAN Dev.01 (@jajaaan_dev01) on CodePen.
参考：Stacking without the z-index property
position: staticを指定している要素が一番最後に書かれていますが、重なりとしては一番下になっているのが見て分かります。
position: relativeとposition: absoluteは記述順に重なります。
z-indexが効かない時の原因は？
「z-indexが何故か効かない…」と思われたこともあるのでしょうか。
なぜ効かないの！？と思いながら、z-indexの数値を999999…と打ち込んで見た人も少なくないかもしれません。
実はz-indexには、適用されるのにはある一定の条件があります。
その条件というのは、スタックコンテキストとスタックレベルというものになります。
このスタックコンテキストとスタックレベルについて知らないと「なんで効かないんだ！」となってしまうので注意が必要です。
以下これらを理解していない場合に起こる効かない原因の例になります。
効かない原因１. 要素にpositionを設定していない
要素にpositionを設定していないと、z-indexは効きません。
z-indexは単体では効きません。そのため、position（static以外）と合わせて指定する必要があります。
スタックコンテキスト（スタック文脈）とは、position（static以外）とz-index（auto以外）が指定されている要素の集合体のことをスタックコンテキストと言います。
スタックコンテキスト = position + z-index
つまり、スタックコンテキストでは無い状態では、z-indexを指定しても要素の重なり順を制御することはできないということです。
効かない原因2. 親要素のz-index値を考慮していない
実はこれが多いのではないでしょうか。
先程の解説のように、positionとz-indexをあわせたものをスタックコンテキストと言います。
スタックコンテキストになることで重なり順を制御することができるようになるわけですが、スタックコンテキストは子要素にも影響を与えます。
以下例を見てみましょう。
See the Pen QWboJra by JAJAAAN Dev.01 (@jajaaan_dev01) on CodePen.
z-indexの値だけで見れば、z-index3の要素が一番上にくるはずですが、一番上にはz-index:2の要素が来ているのが分かります。
これがスタックレベルというものになります。
スタックレベルは兄弟要素であるスタックコンテキストごとに比較され、スタックコンテキストの中にある要素のスタックレベルは、その親要素内を抜けることはないのです。
そのため、上記サンプルコードでは、z-index1の中にあるz-index3は、自分の親要素のスタックレベルより上になることはできないのです。
そのため、別のz-index2の要素のほうが上にくるといった現象が起きます。
効かない原因３.指定値が正しくない
z-indexでは指定できる値がある程度制限されています。
指定できる値は以下のものに制限されます。
- z-index値のルール
- 整数のみ
- 初期値は０
- 最大・最小数は2147483647
z-index以外のプロパティではある程度小数点が使えますが、z-indexでは使えません。
また、z-indexではマイナス値を指定することができますが、z-indexをしていない要素のz-index値は0であるため、マイナスを指定すると通常の要素より下に表示されることになります。
ちなみに指定できる最大値、最小値がありますので、無意味に999999999…などと指定してみ意味がないので注意しましょう。
よければご参考にしてみてください。
