z-indexが効かない条件

📝 問題の再掲

Q47: z-index が効かないのはどんなとき？

正答: position: static（デフォルト）のとき

⚠️ よくある間違い

「z-index: 9999 にしたのに前面に来ない！」というケースのほとんどは、position が指定されていないことが原因です。

📖 段階的な説明

ステップ1：z-index の前提条件

z-index は position が static 以外のときだけ有効です。

• position: relative — 元の位置を基準にずらせる
• position: absolute — 親要素を基準に配置
• position: fixed — 画面に固定
• position: sticky — スクロールで固定

ステップ2：なぜ static では効かないのか

static は「通常の文書フロー」に従う状態で、重なり順の制御対象外です。z-index で重なりを制御するには、まず要素を「重なりの管理対象」にする必要があります。

ステップ3：最も簡単な解決方法

position: relative を追加するだけ。要素の位置は変わらず、z-index が有効になります。

💻 コード例

/* ❌ z-index が効かない */
.modal {
  z-index: 9999; /* position が static なので無視される */
}

/* ✅ position を追加すれば効く */
.modal {
  position: relative; /* これを追加 */
  z-index: 9999;
}

🔗 関連知識

• z-index の値が大きいほど前面に表示されます（数字が大きい = 手前）
• 親要素の z-index が低いと、子要素の z-index をいくら上げても親より前に出られません

✅ 確認問題

Q: 以下のCSSで .overlay が .content の前面に表示されない原因は？

.content { position: relative; z-index: 1; }
.overlay { z-index: 100; }