📚 z-index が効かない

😰 こんな症状

z-index を指定したのに、要素の重なり順が変わらない。

🔍 原因

z-index は position が static 以外（relative, absolute, fixed, sticky）の要素にしか効かない。

❌ エラーが起きるコード

.modal { z-index:999; }
/* position が static */

✅ 直し方

z-index を使いたい要素に position: relative; を追加する。

✅ 修正後のコード

.modal { position:relative; z-index:999; }

🔗 関連するエラー

• スタイルが特定の要素に当たらない — セレクタ名のタイポ
• 余白がおかしい — margin と padding の混同
• Flexbox でレイアウトが崩れる — display: flex を子要素に書いている
• 幅を指定したのにはみ出す — box-sizing が content-box のまま
• スマホで表示が小さい — viewport meta タグがない

📖 この問題を学べるレッスン

CSSコースで基礎から学ぶ →

📝 関連ブログ記事

• プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説

📖 関連する用語

• セレクタ
• プロパティ
• 値
• クラス
• ID

❓ 関連するQ&A

• CSSを書いたのに画面が真っ白
• Flexboxで横並びにならない
• marginとpaddingの違い