【CSSで重なり順を指定するには？】z-indexで重なり順を指定しよう！

webサイトの作成をしていると、素材の重なり順を変更したい時がありますよね。重なり順はcssを用いて変更することができます。

今回はcssで重なり順を変更する方法を紹介したいと思います！

z-indexを使用する！

要素の重なり順を変更する方法は、z-indexを使用します。

z-indexは要素の重なり順を変更することのできるコードとなります。

z-indexは、下記のように記載します。

〇〇 {
z-index:数字;
}

上記の「数字」のところに適当な数字を入力します。入力した数字が大きい要素が上に表示されるということです。

実際にコーディングすると下記のようになります。

See the Pen test by takato (@ttakkatto) on CodePen.

本来は紫色のbox4が1番上に表示されますが、box2にz-indexで1番大きい数字をコーディングしているため、box2は1番上に表示されています！

このように、z-indexを使用することで重なり順を変更することができます。

もしコーディングの勉強で悩んでいる方がいましたら、下記の記事も合わせて読んでみてください！