HTMLとCSSでレイアウトを組んでいると、「ボタンが後ろに隠れてクリックできない」「画像がポップアップの前に表示されてしまう」といった、要素の重なり順で困ることがありますよね。
そんなときに役立つのが z-index（ゼットインデックス）です。このプロパティを使えば、要素の「重なり順」をコントロールできます。

z-indexとは？

z-indexは、要素の前後の重なり順を決めるCSSプロパティです。数値が大きいほど前面、小さいほど背面に表示されます。
ただし、positionプロパティ（relative, absolute, fixed, sticky）とセットで使う必要があります。

基本パターン例

① 要素を前面に出すz-indexの基本

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

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

この場合、.box2は.box1よりも手前に表示されます。

② 実践例：重なるボックスの順番を制御

<div class="red-box">赤</div>
<div class="blue-box">青</div>

.red-box {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 100px;
  height: 100px;
  background: red;
  z-index: 5;
}

.blue-box {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background: blue;
  z-index: 10;
}

このようにz-indexの値で「どちらが前に表示されるか」を明確にできます。

z-indexの注意点

• positionが未指定の場合、z-indexは無効になります。
• 親要素のz-indexが低いと、子要素のz-indexが高くても前面に出ないことがあります。
• 要素が重なっていてクリックできないときは、z-indexだけでなくpositionやoverflowの設定も確認しましょう。

おわりに

z-indexを使いこなすと、ポップアップ、ドロップダウンメニュー、モーダルなどの実装がとてもスムーズになります。
まずは「position + z-index」の組み合わせを試しながら、重なり順の制御に慣れていきましょう！

次回は「z-indexのスタッキングコンテキスト」や「親子関係による影響」など、さらに深い内容を解説予定です！