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

- お知らせ
- NEW 2023.11.23 【Photoshop】水彩風のテクスチャー作成ついて解説
- お知らせ
- 2023.11.16 【Photoshop】写真の一部を消す加工ついて解説
- お知らせ
- 2023.11.09 【Photoshop】鉛筆風フォントの作成について解説
こんな方に読んでほしい
z-index
の使い方について学びたい方へ上の図のように、z-indexを指定することにより、配置位置を変更することができるようになります。
[記事の内容]
z-index
とは、要素の配置位置を指定する際に使用します。
書き方は以下のようになります。
要素 {z-index: 数値};
数値で指定した値が大きいほど上に表示します。
またマイナス(-)の値を指定した場合は、通常の要素より下に配置もできます。
z-indexを指定する際には、必ずposition: 「relative、absolute、fixed」を指定されている場合
のみ適用されます。
またposition: 「static」は初期値になるため、z-indexを指定した際にも適用されません。
基本的な記述方法について解説しております。
ポイント01
①z-indexを指定する際には、必ずposition: 「relative、absolute、fixed」を指定しましょう。
②position: 「static」は初期値になるため、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を指定
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を設定しているのに効かない場合は、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」のどちらかを使用するようにしましょう。
今回はこれで以上です。
z-index
は配置位置を変更することができるようになります。z-index
は数値で指定した値が大きいほど上に表示します。2023.06.22
2023.06.01
2022.06.10
2022.06.03
![]() |
【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート) 新品価格 |
2023.11.23
2023.11.16
2023.11.09
2023.10.26
2023.10.12
2023.09.28
2023.06.15
2022.06.30
2020.03.22
2020.03.06
© 2023 shu-naka-blog