【z-index】要素の重なり順を指定する【CSS】

今回の内容

1.z-indexの基本
2.z-indexの使い方
3.まとめ

1.z-indexの基本

要素を作成すると普通は横に並ぶか縦に並ぶかしかありません。

こばゆた

ただ要素を並べたものがコチラです

pink

blue

HTML & CSSを見る

<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

HTML & CSSを見る

<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

HTML & CSSを見る

.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プロパティで設定しています。

HTML & CSSを見る

<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

最後にz-indexはもっと奥が深いものですがとりあえずはこのくらいの知識で大丈夫だと思います。

3.まとめ

z-index まとめ

z-indexを使うことで前後の順番を指定できる

セレクター{
  z-index: 値;
}

使う時はpositionプロパティと一緒に使う(static以外)
HTMLで後に書かれたものほど配置が手前になる
マイナスを付けると奥にいく