【CSS】 z-indexで配置位置を指定する方法を学ぼう！

シュウ

今回は【CSS】z-indexで配置位置を指定する方法を学ぼう！
についての解説になります！

こんな方に読んでほしい

CSSを学び始めた方へ
z-indexの使い方について学びたい方へ
今回は要素の配置位置について記事を書いております

上の図のように、z-indexを指定することにより、配置位置を変更することができるようになります。

指定できる値

auto
初期値になります。親要素と同じ階層に表示されます。
数値
数値で指定した値が大きいほど上に表示します。
またマイナス(-)の値を指定した場合は、通常の要素より下に配置もできます。

[記事の内容]

z-indexについて

z-indexとは、要素の配置位置を指定する際に使用します。
書き方は以下のようになります。

要素 {z-index: 数値};

数値で指定した値が大きいほど上に表示します。
またマイナス(-)の値を指定した場合は、通常の要素より下に配置もできます。

最小値 -2147483647
最大値 2147483647
整数のみ小数点はNGになります

z-indexを使用する際の注意点

z-indexを指定する際には、必ずposition: 「relative、absolute、fixed」を指定されている場合
のみ適用されます。

またposition: 「static」は初期値になるため、z-indexを指定した際にも適用されません。

positionプロパティ参考になるかも

positionで配置規則を指定し使い方を学ぼう！

基本的な記述方法について解説しております。

ポイント01
①z-indexを指定する際には、必ずposition: 「relative、absolute、fixed」を指定しましょう。
②position: 「static」は初期値になるため、z-indexを指定した際にも適用されません。

z-index指定方法について

z-index指定はシンプルですが、先ほどの注意点に基づき解説していきます。

z-indexを指定していない場合

z-indexを指定せず、positionのみでの重なりの指定をみてみましょう。

positionのみでの指定

1番目

2番目

3番目

<div class="position__area_r">
	<p class="box01">1番目</p>
	<p class="box02">2番目</p>
	<p class="box03">3番目</p>
</div>

.position__area_r {
	width: 100%;
	height: 135px;
	background-color: #395848;
	border: solid 3px #fff;
	
	/*--relativeを指定--*/
	position: relative;
}

.box01,.box02,.box03 {

	/*--absoluteを指定--*/
	position: absolute;
}

.box01 {
	top: 0;
	left: 0;
}
.box02 {
	top: 40px;
	left: 40px;
}
.box03 {
	top: 80px;
	left: 80px;
}

z-indexを指定していない場合は、後ろに書かれた要素が上に重なります。

z-indexを指定した場合

数値で指定した値が大きいほど上に表示します。
またマイナス(-)の値を指定した場合は、通常の要素より下に配置もできます。

最小値 -2147483647
最大値 2147483647
整数のみ小数点はNGになります

z-indexを指定

1番目

2番目

3番目

<div class="position__area_r">
	<p class="box01">1番目</p>
	<p class="box02">2番目</p>
	<p class="box03">3番目</p>
</div>

.position__area_r {
	width: 100%;
	height: 135px;
	background-color: #395848;
	border: solid 3px #fff;
	
	/*--relativeを指定--*/
	position: relative;
}

.box01,.box02,.box03 {

	/*--absoluteを指定--*/
	position: absolute;
}

.box01 {
	z-index: 30;
	top: 0;
	left: 0;
}
.box02 {
	z-index: 20;
	top: 40px;
	left: 40px;
}
.box03 {
	z-index: 10;
	top: 80px;
	left: 80px;
}

1box01には、1番数値の値が大きい30を指定

2box02には、2番目に数値の値が大きい20を指定

3box03には、3番目に数値の値が大きい10を指定

数値の大きさによって重なりの順番は変わってきます。

z-indexが効かない場合

z-indexを設定しているのに効かない場合は、positionが指定されているか確認しましょう。
また、positionが指定されていても「static」になっていないか確認もしておきましょう。

z-indexを指定

1番目

2番目

3番目

<div class="position__area_r">
	<p class="box01">1番目</p>
	<p class="box02">2番目</p>
	<p class="box03">3番目</p>
</div>

.position__area_r {/*--省略--*/}
.box01 {
	z-index: 30;
	top: 0;
	left: 0;
}
.box02 {
    position: absolute;
	z-index: 20;
	top: 40px;
	left: 40px;
}
.box03 {
    position: absolute;
	z-index: 10;
	top: 80px;
	left: 80px;
}

box01にz-index: 30を指定していますが、重なりの順番が変わっておりません。
この対処法としては、position: 「relative、absolute、fixed」を指定するようにしましょう。
この場合が「relative、absolute」のどちらかを使用するようにしましょう。