CSSのz-indexプロパティ：要素の重なり順を自在に制御

Posted on by

CSSのz-indexプロパティは、要素の重なり順を指定するために使用されます。
このプロパティを正しく活用することで、レイヤー構造を管理し、
要素の表示順序を思い通りに制御できます。
本記事では、z-indexの基本的な使い方から応用例までを詳しく解説します。

z-indexプロパティとは？

z-indexプロパティは、要素の「スタッキングコンテキスト」に基づいて、重なり順を管理します。
値が大きい要素ほど、他の要素よりも前面に表示されます。

基本構文

selector {
  z-index: value;
}

指定可能な値

  • 正の整数（例：1, 10）: 他の要素よりも前面に表示。
  • 負の整数（例：-1）: 他の要素の背面に表示。
  • auto: デフォルト値。親要素のスタッキングコンテキストに従う。

スタッキングコンテキストとは？

z-indexは、スタッキングコンテキスト（stacking context）内でのみ機能します。
スタッキングコンテキストとは、要素の重なり順序を決定する仮想的な「レイヤー」です。

スタッキングコンテキストが作成される条件

positionがrelative, absolute, またはfixedである。
z-indexが明示的に指定されている。
CSSプロパティの特定の値（例：transform, filter, opacity < 1）が指定されている。

基本的な使い方

前面に表示

要素を他の要素より前面に表示します。

コード例

div {
  position: relative;
  z-index: 10;
}

背面に表示

負のz-index値を使って要素を背面に配置します。

コード例

div {
  position: relative;
  z-index: -1;
}

デフォルトの重なり順

z-indexを指定しない場合、HTMLのソースコードの順序に基づいて表示されます。

実用例

モーダルウィンドウの前面表示

モーダルウィンドウが他の要素よりも前面に表示されるようにします。

コード例

.modal {
  position: fixed;
  z-index: 1000;
  background-color: white;
  width: 80%;
  height: 80%;
}

背景要素の配置

背景画像や装飾用の要素を背面に配置します。

コード例

.background {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: lightblue;
}

重なりの調整

複数の要素の重なり順を調整します。

コード例

.box1 {
  position: relative;
  z-index: 1;
}

.box2 {
  position: relative;
  z-index: 2;
}

結果

.box2が.box1より前面に表示されます。

応用例

ホバー時に前面表示

ホバーした要素を前面に表示します。

コード例

.card {
  position: relative;
  z-index: 1;
  transition: z-index 0.3s;
}

.card:hover {
  z-index: 10;
}

ドロップダウンメニューの表示

ドロップダウンメニューが他の要素よりも前面に表示されるようにします。

コード例

.menu {
  position: absolute;
  z-index: 100;
  background-color: white;
}

ポップアップツールチップ

ツールチップが背面の要素に隠れないようにします。

コード例

.tooltip {
  position: absolute;
  z-index: 50;
  background-color: black;
  color: white;
  padding: 5px;
}

よくある問題と解決策

Q1. z-indexが効かない原因は？

スタッキングコンテキストが適切に設定されていない
positionプロパティをrelativeやabsoluteに設定してください

親要素のz-indexが影響している
親要素が別のスタッキングコンテキストを形成している場合があります。

Q2. 背景要素が前面に表示される

要素のz-index値が正しいか確認してください。
positionプロパティが設定されていることを確認してください。

ベストプラクティス

適切なz-index値を使用

大きな値（例：10000）を避け、論理的な範囲で指定します。

親要素の影響を確認

スタッキングコンテキストの影響を理解し、意図した動作になるように調整します。

デザインを簡潔に保つ

重なり順が複雑になるとメンテナンスが困難になるため、シンプルな設計を心がけましょう。

まとめ

CSSのz-indexプロパティを適切に使いこなすことで、要素の重なり順を自由に制御できます。
本記事で紹介した基本的な使い方や応用例を参考に、
モーダルウィンドウやツールチップなどの設計に役立ててください。

特に、スタッキングコンテキストを意識することで、意図した通りのデザインを構築できるようになります。