こんにちは！Web制作初心者のryumaです。今日は、CSS の「z-index」や「スタッキングコンテキスト」についてお話しします。私も初めてこれらに触れたとき、少し混乱してしまいましたが、この記事では初心者の方にも分かりやすく、なるべくシンプルに説明していきます！
z-indexとは？
まず、z-index は HTML 要素が画面上で「どの順番で重なるか」を決めるプロパティです。通常、要素は HTML のコード上で書かれた順番で重なりますが、z-index を使うことで「この要素を前に出したい！」という時に、順序を明確に指定できます。
例：• z-index: 1; → 他の要素の後ろに表示される • z-index: 100; → 他の要素よりも手前に表示される
例えば、次のようなケースがあります。
この場合、CSS で box1 に z-index を指定してみましょう。
.box1 {
width: 100px;
height: 100px;
background-color: red;
position: relative;
z-index: 10;
}
.box2 {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
z-index: 5;
}
これで、box1 が box2 の手前に表示されます。このように z-index を使うことで、要素の重なり順をコントロールできるのです。
スタッキングコンテキストとは？
次に「スタッキングコンテキスト」について説明します。これも z-index に関わる概念ですが、初めは少しややこしく感じるかもしれません。
簡単に言うと、スタッキングコンテキストは「要素の重なりを管理する独自の空間」です。ある要素がスタッキングコンテキストを持つと、その要素とその子要素たちは、他のスタッキングコンテキストと独立して重なり順が決まります。
スタッキングコンテキストが作られる条件
• position: absolute または position: relative の要素に z-index が設定されている場合
• opacity が 1 より小さい値を持つ要素
• transform や filter プロパティが使われている要素
これらの場合、新しいスタッキングコンテキストが作られ、z-index の設定がその中だけで有効になります。
例：
.parent {
width: 200px;
height: 200px;
background-color: green;
position: relative;
z-index: 10;
}
.child {
width: 100px;
height: 100px;
background-color: yellow;
z-index: 5;
}
この場合、parent に z-index が設定されているので、parent 自体がスタッキングコンテキストを持ちます。そのため、child の z-index は parent 内でのみ影響を持ちます。結果として、他の要素との重なりは parent の z-index に依存します。
つまづいたところと解決
最初、私がつまづいたのは、z-index の値を設定しても思った通りに要素が前後しないという現象でした。実は、それはスタッキングコンテキストが原因でした。要素が別のスタッキングコンテキストの中にある場合、その z-index の影響は親要素内だけでしか効果を発揮しないのです。
この問題を解決するためには、親要素自体の z-index を確認し、必要ならばその z-index を調整する必要があります。スタッキングコンテキストを理解することで、z-index を正しく使えるようになります！
まとめ
z-index とスタッキングコンテキストは少しややこしいですが、実際に触れてみるとだんだん理解できてくるはずです。CSS を書く際、要素の重なりに悩んだら、ぜひ z-index やスタッキングコンテキストを見直してみてください。
【A8.netを利用するメリット】
◇ 有名ブランドから高額報酬がもらえる広告が掲載できる！
◇ PCはもちろん、スマホからも広告発行が可能！
◇ もちろん会員登録は無料！その後も費用は一切かかりません！
⇒アフィリエイトならA8.net
