CSS z-index プロパティ

Volardev 編集部 April 12, 2026

1. z-index プロパティとは

z-index プロパティは、要素の**スタック順序（重なり順）**を指定するために使用されます。

要素が重なり合った際、どの要素が前面に表示され、どの要素が背面に隠れるかをこのプロパティで制御します。

1.1 スタック順序のルール

スタック順序が大きい（数値が高い）要素は、常にスタック順序が小さい要素よりも前面に表示されます。
z-index は、ポジショニングされた要素（position: absolute;、position: relative;、position: fixed;、または position: sticky; が指定されている要素）およびフレックスアイテム（display: flex; の直下の子要素）に対してのみ機能します。

注意: position プロパティが static（デフォルト値）の要素に対しては、z-index は効果を持ちません。

2. z-index の実装例

以下の例では、画像に z-index を -1 に設定することで、テキストの背面に配置しています。

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

2.1 サンプルコードの全体像

<!DOCTYPE html>
<html>
<head>
<style>
img {
  position: absolute;
  left: 0px;
  top: 0px;
  /* 画像をテキストの後ろに配置するために -1 を指定 */
  z-index: -1;
}
</style>
</head>
<body>

<h1>これは見出しです</h1>

<img src="w3css.gif" width="100" height="140">

<p>z-index が -1 に設定されているため、この画像はテキストの背面に表示されます。</p>

</body>
</html>

3. z-index を指定しない場合

要素に z-index が指定されていない場合、HTML の構造（コードの記述順）に基づいてデフォルトのスタック順序が決まります。

デフォルトでは、後から記述された要素が前面に表示されます。

3.1 重なりのデフォルト挙動の例

以下の例では、z-index を指定していないため、HTML 内で最後に記述された要素が最も手前に表示されます。

<!DOCTYPE html>
<html>
<head>
<style>
.black-box {
  position: relative;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}

.gray-box {
  position: absolute;
  background: lightgray;
  width: 80%;
  height: 170px;
  top: -20px;
  left: 50px;
}

.green-box {
  position: absolute;
  background: lightgreen;
  width: 20%;
  height: 100px;
  top: 10px;
  left: 10px;
}
</style>
</head>
<body>

<div class="black-box">
  黒い枠線のボックス（親要素）
  <div class="gray-box">グレーのボックス（子要素）</div>
  <div class="green-box">グリーンのボックス（子要素）</div>
</div>

</body>
</html>

4. まとめ

z-index を活用することで、複雑なレイアウトにおける要素の重なりを自由にコントロールできます。

正の数: 要素を前面に移動させます。
負の数: 要素を背面に移動させます。
注意点: 必ず position プロパティとセットで使用することを忘れないでください。

開発現場では、モーダルウィンドウやドロップダウンメニュー、フローティングアクションボタンなどの実装に欠かせない重要なプロパティです。