LINEで現役エンジニアに直接質問してみよう!登録無料

CSS z-indexで要素の重なり順を設定!後ろに隠れてしまった時の解決法

この記事の概要

CSSを使って要素の重なり順を変えるz-indexについて解説します。

通常、後に書いた要素の方が優先されて一番表面に表示されます。しかし、ときには一番表面に要素を配置したい場合もあると思います。
このような時にz-indexを使います。

使う頻度はそれほど多くないですが、使えるとデザインの幅がグッと広がりますよ。

合わせて読みたい

\ CSSについてわからない人は、下記記事で解説しています!参考にどうぞ /

z-indexとは?

z-indexは、要素の重なり順を制御するCSSプロパティです。

通常のHTMLでは、下の要素ほど要素ほど重なりの優先度が高く、上に重なっていきます。

ところが、z-indexを使うとそれらを無視して重なり順を自由に変えることが出来ます。

このように、要素の重なりが逆になっているのがわかるかと思います。

z-indexはこのように、要素の重なりを自由な順番で変えることができます

z-index使い方・書き方

z-indexの使い方や書き方を解説します。

セレクタ {
    z-index: 値;
}

このように、z-indexを使うのに必要なのは2つあります。

  • セレクタ: どの部分のz-indexを変更するのかを指定
  • 値: z-index重なり順をautoキーワードか数値で指定

また、値にとれるのは、「auto」キーワードか「-2147483647」〜「2147483647」の数値です。

参考 z-indexmozilla

z-index使い方・書き方の設定例

z-indexの設定例を見ていきましょう。

通常、HTMLではposition:absoluteposition:fixedにして重なる状況にしないと効果が見れません。ですので、下記のように要素が重なった状況を用意しました。

ここで、「要素1」だけにz-indexを適用してみます。

.elem1 {
    z-index: 1;
}

このように、重なり順が変化して「要素1」が一番前になりました。

ここまでがz-indexの基本です。

この後は、

  • z-indexがどのような場所で使われるか
  • z-indexが効かない時の対処法
  • z-indexをつかったデザインへの応用方法
  • z-indexをうまく管理する方法

などなど、深い知識を解説していきます。

z-indexがどのような場所で使われる?

z-indexを使う方法は、主にTOPへ戻るボタンや画面上部で固定されるメニューの作成でよく使われます。

この画像の様に、右下に「」のマークの付いてあるTOPへ戻るボタンがあります。

このように、通常は他の要素で隠れてしまう部分で、z-indexが使われています。

z-indexが効かない時の対処法

z-indexが効かない場合は、要素の重なりを制御する要素同士が兄弟要素であるかを確認しましょう。

大抵、その子要素と親要素で要素の重なり順を制御しようとしている場合があります。

どういうことがイラストを用いて解説します。

z-indexが効かない仕組み

そもそも、HTMLとは、いわゆる階層構造になっています。

親要素、子要素、孫要素、ひ孫要素、、、とどんどん積み重なっていきます。

z-indexはこの階層構造を強く意識しています。

z-indexで変更できる順序は、基本的に同一の階層(兄弟要素)に限られます。

例えば、この図のようにelem1 elem2 elem3という3つの兄弟要素間では、z-indexを使って、重なり順を自由に変更できます。

しかし、その子要素elem3-childには、z-indexの影響を受けません。あくまで、elem3z-indexがベースとなり、elem3内で順序が変わるだけになります。

つまり、「Webページ内z-indexによる重なり順は全ての階層で共通しているものではない」ということです。

z-indexが効かない時はどんな時?

z-indexが親要素や子要素に影響を与えるのは理解できたと思います。これがどのような時に発生するのか例を紹介します。

これは、colissさんの下記記事で解説しているので見てみてください。

参考 CSSでz-indexが効かない時の4つの原因とその対応方法coliss

z-indexが効くようにするには?

z-indexが効くようにするには、可能な限り親要素の方に要素を持ってくることです。
そうすれば、z-indexで順番を変えられる範囲が増えるので、目的の順番にしやすくなります。

z-index以外で重なりを制御する方法

CSSでレイアウトを作ると、z-indexが思ったように機能しない時があります。

z-indexは簡単に要素の重なりを制御することが出来ますが、ただ単純に重なり順序を制御するだけでなく、他のプロパティから影響を受けてz-indexがうまく効かない時があります。

そのような時は、z-index以外の方法で重なりを制御することも出来ますので、見ていきましょう。

  1. positionstatic以外を設定する
  2. opacitytransformz-indexが0として評価される
  3. 子要素のz-indexは親要素のz-indexに縛られている

positionにstatic以外を設定する

まず、基本としてデフォルトのスタイルは、最初に各要素が背面に、最後に各要素が前面になるように配置されます。これを自然な重なりといいます。

サンプルとして、わざと要素が重なるようにすると、このように表示されます。

つまり、要素の重なりは、HTMLの各順番で異なるということです。

ここで、テキスト要素にposition: relative;を追加してみます。

すると、テキスト要素が最前面に表示されました。

opacityやtransformでz-indexが0として評価される

ここで、右下の要素にopacitytransformを設定したかったとしましょう。

実際に設定してみるとわかるように、z-index: 0;として評価されるため、先程のposition: relative;で実現した重なり順が壊れてしまいます。

これを解決するには、opacitytransformを設定した要素以外の要素に、z-indexを使って相対的に値が適切になるように設定する必要があります。

opacitytransformを設定した要素は、z-index: 0として固定されてしまうため、それ以上変更することが出来ないためです。

これで、テキスト要素が最前面に表示されました。

まとめ

  • z-indexは要素の順序を変えることができる
  • デフォルトはauto、値は「-2147483647」〜「2147483647」の整数値を設定可能
  • z-indexはその兄弟要素間での順番を変えるだけ。外側の要素には基本的に影響を及ぼさない
  • z-indexが効かないときは、ルート要素の方に近づくように要素を再配置しよう

以上、z-indexをつかって要素の重なり順を変える方法をアキ(@hackablejp)が解説しました!

この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。