[CSS]z-indexとは？要素を重ねて表示するCSSプロパティ

CSSにはz-indexというプロパティがあります。

このプロパティを使うと要素を重ねて表示させることができます。色々とスタイルの幅が広がりますね。

今回はこのz-indexの使い方について紹介していきます。

z-indexとは？

画像などの要素が複数重なっている時にどれを手前にして、どれを後ろに配置するかを指定できるプロパティです。

実際にコードを交えて見てみます。

z-indexの後に続けて値を入力するわけですが、これは1でも10でもOKです。

他の要素よりも1番大きな値を持っているものが最前列で表示されます。

この場合だと赤色ボックスの方が青色ボックスよりも大きな値を持っているので最前列に表示されます。

これは二つ以上の場合でも同じです。1,2,3とz-indexの値を持つ要素がある場合、1番大きな要素のものから最前列に表示されます。

positionプロパティも忘れずに

こうした要素の重なりをスタイルする時にはpositionプロパティも合わせて使うことになります。

ここではposition:relativeとposition:absoluteを使っていますね。

relativeは通常配置される位置から相対的な場所を指定することができます。

子要素でabosoluteを指定すれば、親要素(この場合、wrap)の位置を基準に絶対的な場所を指定することができます。