こんにちは朱夏です。
今回はCSSの「z-index」を紹介したいと思います。
position:absolute;で要素を重ねた時に、重なる順番を変えたいんだけどどうやったらいいんだろう。
「z-index」を使うと、重なる順番を変更する事が出来ます。
書き方や使い方などを解説していきます。
それではいってみましょう。
「z-index」の書き方
応用編：マウスカーソルを合わせた要素を手前に表示
あとがき
「z-index」の書き方
「z-index」の書き方は以下の様になります。
「z-index」で指定できる値は、重なりの順番を決める数値のみです。
重なる順番は、数字が大きくなるほど手前に表示されます。
実行結果を以下に置いておきます。
1つ目は「z-index」を使用していない場合の重なり方です。
HTMLの後から書かれたものが上に表示されます。
See the Pen
rNVXxyK by 朱夏 (@syunatsu1)
on CodePen.
2つ目は「z-index」を使用したパターンです。
「z-index」を使って、真ん中の青色を一番手前に表示させてみます。
See the Pen
JjdgGZQ by 朱夏 (@syunatsu1)
on CodePen.
こんな感じで要素が重なる順番を変える事が出来ます。
応用編：マウスカーソルを合わせた要素を手前に表示
応用編では、「z-index」を使って、マウスカーソルを合わせた要素を手前に表示させてみたいと思います。
実行結果はこんな感じになります。
See the Pen
RwPXrvR by 朱夏 (@syunatsu1)
on CodePen.
変化が解りやすいように、boxのサイズも10pxほど大きく表示する様にしてみました。
あとがき
というわけで、「z-index」で重なる順番を変更する方法を解説してみました。
今回のまとめは以下。
- 「z-index」は要素の重なり順を制御できる
- 「z-index」で指定する数値は大きいほど手前に表示される
少し凝ったデザインを作る時は要素を重ねる事も増えてくるので、覚えておくと便利だと思います。
今回は以上です。
次回もよろしくお願いします。
