重ね順

定義

z-index は、複数の要素が同じ場所で重なったときに、どれを手前に出してどれを奥に隠すかを 決める値です。値が大きいほど手前に出てほかの要素を覆い、値が小さいほど奥に回って 隠されます。前に学んだ影が要素を視覚的に浮いて見せるための目の錯覚だとすれば、 z-index は実際に重なる順序そのものを決める値です。だからドロップダウンメニューが 下のコンテンツに隠れずに開いたり、モーダルが画面全体を覆って一番手前に表示されたりするのは、 すべて z-index のおかげです。要素が横に並んでいるときはこの値を気にすることはほとんど ありませんが、ある要素がほかの要素の上に重なって浮かび上がる瞬間から、急に重要になります。 普段は目に見えず、必要なときだけ存在感を現す、画面の裏側で働く静かなルールのような値です。

なぜ重要か

z-index が重要なのは、重なり合う要素を意図した順序どおりに見せてくれるからです。 ドロップダウン、モーダル、ツールチップ、通知のように、ほかのコンテンツの上へ一時的に 浮かび上がる必要がある要素は、z-index がないと思わぬところで奥に隠れてしまい、 クリックすらできないことがあります。ただし、この値は管理がやっかいです。ある要素が ほかの要素の上に出てこないからと、慌てて 999999 のような大きな数字を付け始めると、 次の要素はそれより大きな数字を、その次はさらに大きな数字を付ける、いわゆる z-index 戦争が起きてしまいます。結局、どの値がなぜそうなっているのか誰も分からなくなり、 保守が悪夢になります。だから z-index は場当たり的に決めるのではなく、画面全体の 重なりの階層をあらかじめ設計し、そのルールの中でだけ値を割り当てるのが肝心です。

よくある間違い

• 要素が隠れるたびに 999999 のような極端に大きな数字を場当たり的に付けてしまうことです。 こうすると、次の要素はもっと大きな値を付けなければならない競争が始まり、結局どの値が なぜそうなのか誰にも分からない z-index 戦争へと発展してしまいます。
• 階層をあらかじめ決めずに、その場その場で必要な値だけを付けてしまうことです。ルールなく 散らばった z-index の値は、新しい要素を追加するたびにどこへ差し込めばよいか分からず、 思わぬ隠れ問題が繰り返し発生します。

実務のヒント

• 画面の重なりの階層を、あらかじめいくつかの段階に決めておきましょう。たとえば基本の コンテンツは 0、ドロップダウンは 100、モーダルは 1000、ツールチップは 1100 のように 役割ごとに層を分けておけば、新しい要素が増えてもどの層に置けばよいかすぐに判断できます。
• こうして決めた階層の値を、あちこちに散らさずトークンや定数として一か所にまとめて 管理しましょう。値が一か所に定義されていれば、全体の重なり順を一目で把握し、 調整するのも簡単になります。
• 値をむやみに大きくする前に、本当に z-index の問題なのか、それとも要素が別々の スタッキングコンテキスト(重ね合わせコンテキスト)に属していて値が効かない状況 なのかを、まず確認しましょう。原因を突き止めれば、大きな数字を使わなくても解決 できる場合が多くあります。

関連概念