SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.05.22
  • CATEGORY
TITLE

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

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

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

こんな方に読んでほしい

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

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

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

z-indexについて

z-indexについて

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

要素 {z-index: 数値};

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

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

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

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

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

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

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

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

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が効かない場合

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」のどちらかを使用するようにしましょう。

まとめ

今回はこれで以上です。

POINT
  • z-indexは配置位置を変更することができるようになります。
  • z-indexは数値で指定した値が大きいほど上に表示します。
  •  最小値 -2147483647 〜
    最大値 2147483647までになります。
  •  z-indexを指定する際には、必ずposition: 「relative、absolute、fixed」を指定しましょう。
  •  position: 「static」は初期値になるため、z-indexを指定した際にも適用されません。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top