CSSのz-index完全ガイド！要素を重ねるスタッキングの基本と使い方

CSSでレイアウトを設計する際、要素を上下左右に配置することはよくありますよね。しかし、z-indexを使えば、Z軸という「3つ目の次元」で要素を動かし、重なり順（スタッキング）をコントロールできるのです。

z-indexプロパティには、キーワードのauto、または整数値を指定できます。以下はすべて有効な宣言です。

z-index: auto;
z-index: -1;
z-index: 9999;

重要なポイント：z-indexを機能させるには、対象の要素にpositionプロパティでrelative、absolute、またはfixedのいずれかを指定する必要があります。位置指定がない場合、z-index: autoを指定したのと同じ状態になり、スタッキングコンテキストは適用されません。

それでは、実際の例を見ていきましょう。

モルモットを配置してみよう

この例はCodepenでも公開しています。ぜひ手を動かしながら一緒にコーディングしてみてください。

ここでは2匹のモルモット、スペイン語で「クイ（Cuy）」と呼ばれるかわいい動物たちを配置します。真夏の気温35度超えを想像してください。1匹目のクイは湖の中で涼んでいます。2匹目のクイはとても怠け者なので、コーヒーで起こしてあげましょう！そこで、クイ#2がコーヒーを飲めるように、画像を重ねて配置します。

位置指定やCSSを何も設定しない状態だと、画像は以下のように表示されます。

狙いは、z-indexを使ってスタッキングコンテキストを作成し、画像を湖やコーヒーの上に重ねて表示することです。

positionプロパティで位置指定を追加する

繰り返しになりますが、z-indexを適用するには要素への位置指定が必須です。まずはクイ#1にpositionを指定してみましょう。

img.cuy.one {
  position: absolute;
}

あれ？友達がどこにも見当たりませんね。次に、より高いスタッキング順位を指定して、湖の上に表示させましょう。

img.cuy.one {
  position: absolute;
  z-index: 1;
}

やりました！クイが湖の上に表示されました。あとはpaddingを調整して湖の中に収めれば完成ですが、その部分はぜひご自身で試してみてください。

2匹目のクイも配置する

z-indexでスタッキングコンテキストを作る方法がわかったので、2匹目も簡単に配置できます。

img.cuy.two {
  position: absolute;
  width: 160px;
  padding: 100px;
  z-index: 1;
}

ここでのpaddingは画像の正確な位置調整のためのもので、widthは小さな友だちのサイズ指定に使っています。これで作業完了！全員がリフレッシュして満足げな様子です。

まとめ：z-indexを使いこなすための注意点

z-indexを活用すると、面白いレイアウトのアイデアが広がります。Codepenには、チャットポップアップデザインをz-indexで最前面に配置した別の例も用意しています。ぜひチェックしてみてください。

忘れてはいけないこと：必ず要素に位置指定を行わないと、z-indexは機能しません。Codepenで位置指定を削除して挙動を確認してみると、その違いが実感できるでしょう。

もうひとつの重要なアドバイスとして、z-indexは兄弟要素（同階層の要素）に対して適用するのが基本です。今回の例では、画像同士はネストされておらず、横並びの兄弟関係でした。深くネストされた要素に対しては、z-indexが期待どおりに動作しないことがあります。この点は頭に入れておきましょう。