1.z-indexの基本
要素を作成すると普通は横に並ぶか縦に並ぶかしかありません。
こばゆた
ただ要素を並べたものがコチラです
pink
blue
<div class="wrapper">
<div class="pink"></div>
<div class="blue"></div>
</div>.box{
height: 50px;
width: 50px;
color: #fff;
text-align: center;
line-height: 50px;
}
.pink{
background-color: pink;
}
.blue{
background-color: blue;
}こばゆた
通常はこのようになりますが、positionプロパティを使った時は話が変わってきます
青色の箱の方にpositionプロパティ”absolute”を設定し、位置を指定すると以下のようになります。
チャッピー
“absolute”は確か絶対配置だったっけ？
pink
blue
<div class="wrapper">
<div class="pink"></div>
<div class="blue"></div>
</div>.wrapper{
position: relative;
}
.pink{
height: 50px;
width: 100%;
background-color: pink;
}
.blue{
height: 150px;
width: 100%;
background-color: blue;
position: absolute;
top: 0;
}絶対配置で指定したのでピンクの部分が隠れてしまっていますね。
このような時に要素の重なり順を任意に指定できるのがz-indexプロパティです。
ボタンを押すとz-indexを設定できます
pink
blue
z-index
.wrapper{
position: relative;
}
.pink{
height: 50px;
width: 100%;
background-color: pink;
position: absolute;
z-index: 1;
}
.blue{
height: 150px;
width: 100%;
background-color: blue;
position: absolute;
top: 0;
}こばゆた
使う時の注意点はpositionプロパティと一緒に使う(static以外)ところです
2.z-indexの使い方
z-indexを使うには値を“auto”または数値で指定します。初期値はautoで並べられた順番になります。
セレクター{
z-index: 値;
}では実際に使ってみます。
以下の４枚の画像を重ねると…。
こばゆた
こんな感じになります
ちなみに背景はbackgroundプロパティで設定しています。
<div class="wrapper">
<img src="世紀末な車.png" class="car">
<img src="世紀末な方.png" class="man">
<img src="草.png" class="grass">
</div>.wrapper{
position: relative;
border: 1px solid #ddd;
width: 100%;
height: 500px;
background: url(https://kbyt-programming.com/wp-content/uploads/2020/12/bg_natural_mori-1024x576.jpg) center / cover no-repeat;
}
.car{
position: absolute;
top: 0;
}
.man{
position: absolute;
top: 0;
}
.grass{
position: absolute;
top: 0;
}ちなみにHTMLで後に書かれたものほど配置が手前になります。
なので今の順番は
- 背景
- 車
- 人
- 草
の順番になっています。
なので人は二番目にいます
また値にマイナスを付けることもでき、その時は奥にいきます。
こばゆた
ここにz-indexを適用してみます
クリックで世紀末な方のz-indexの値が変わります
1
0
-1
最後にz-indexはもっと奥が深いものですがとりあえずはこのくらいの知識で大丈夫だと思います。
3.まとめ
z-index まとめ
- z-indexを使うことで前後の順番を指定できる
セレクター{
z-index: 値;
}- 使う時はpositionプロパティと一緒に使う(static以外)
- HTMLで後に書かれたものほど配置が手前になる
- マイナスを付けると奥にいく
コメント