問題3: z-indexが効かない

問題

z-index: 999を設定したのに、要素が他の要素の下に隠れてしまいます。

HTML

<div class="container">
  <div class="box1">ボックス1</div>
  <div class="box2">ボックス2（上に表示したい）</div>
  <div class="box3">ボックス3</div>
</div>

CSS

.container {
  position: relative;
  height: 200px;
}

.box1 {
  /* positionなし */
  width: 150px;
  height: 100px;
  background-color: #4CAF50;
  z-index: 1;
}

.box2 {
  /* positionなし */
  width: 150px;
  height: 100px;
  background-color: #2196F3;
  margin-top: -50px;
  margin-left: 50px;
  z-index: 999; /* 効いていない */
}

.box3 {
  position: relative;
  width: 150px;
  height: 100px;
  background-color: #FF9800;
  margin-top: -50px;
  margin-left: 100px;
  z-index: 2;
}

実行結果

ボックス1
ボックス2（上に表示したい）
ボックス3

※ ボックス2のz-indexが999なのに、ボックス3の下に隠れています

🔧 実際に試してみよう（リアルタイム更新）

上部でHTMLまたはCSSタブを選択して編集すると、下部の結果エリアがリアルタイムで更新されます。
CSSの .box2 に position: relative; を追加して、z-indexが効くようにしてみましょう。

📺 ライブプレビュー
更新中

ヒント

クリックしてヒントを表示

z-indexプロパティは位置指定された要素にのみ有効です。

「位置指定された要素」とは、positionがstatic以外の値を持つ要素のことです。

z-indexを適用したい要素のpositionプロパティを確認してみましょう。

解答

クリックして解答を表示

問題の原因

ボックス2にpositionプロパティが設定されていないため、z-indexが効いていません。z-indexは位置指定された要素にのみ有効です。

z-indexが効く条件

  • position: relative
  • position: absolute
  • position: fixed
  • position: sticky
  • display: flexまたはdisplay: gridの子要素（特殊ケース）

注意：position: static（デフォルト）では効きません

修正方法

box2にposition: relativeを追加

.box1 {
  position: relative;  /* 追加 */
  width: 150px;
  height: 100px;
  background-color: #4CAF50;
  z-index: 1;
}

.box2 {
  position: relative;  /* 追加：これでz-indexが有効に */
  width: 150px;
  height: 100px;
  background-color: #2196F3;
  margin-top: -50px;
  margin-left: 50px;
  z-index: 999;  /* これで効くようになる */
}

.box3 {
  position: relative;  /* 既に設定済み */
  width: 150px;
  height: 100px;
  background-color: #FF9800;
  margin-top: -50px;
  margin-left: 100px;
  z-index: 2;
}
修正後の結果
ボックス1
ボックス2（最前面）
ボックス3

スタッキングコンテキストの理解

重なり順序の決定要因（優先順位順）

  1. スタッキングコンテキストの階層
  2. z-indexの値（大きいほど上）
  3. HTMLの順序（後の要素が上）

新しいスタッキングコンテキストが作られる条件

  • position: absolute/relative + z-index（auto以外）
  • position: fixed/sticky
  • opacity < 1
  • transform、filter、perspectiveなどのCSSプロパティ
  • display: flex/gridの子要素でz-indexを持つ

よくあるz-indexの問題と解決策

/* ❌ 効かない例 */
.element {
  z-index: 9999;  /* positionがないので無効 */
}

/* ✅ 修正例1：最小限の変更 */
.element {
  position: relative;  /* 追加 */
  z-index: 9999;
}

/* ✅ 修正例2：絶対配置が必要な場合 */
.element {
  position: absolute;
  z-index: 9999;
  top: 0;
  left: 0;
}

/* ⚠️ 親要素のz-indexに注意 */
.parent {
  position: relative;
  z-index: 1;  /* 子要素は親のコンテキスト内でのみ有効 */
}
.child {
  position: absolute;
  z-index: 999;  /* 親より高くても、親のコンテキスト外の要素には負ける */
}

覚えておくポイント

  • z-indexにはpositionが必要（static以外）
  • 最も簡単な解決策はposition: relativeを追加
  • z-indexの値は相対的（999でも1でも上下関係が重要）
  • 親要素のスタッキングコンテキストの影響を受ける
  • DevToolsで要素のz-indexとpositionを確認する習慣を