z-indexってなんだろう

はじめに

画像の重なり方が思い通りにいかず困った時にz-indexを設定すると教わりましたが、
設定するときにまだ戸惑うのでz-indexについてまとめてみました。

z-indexってなんだろう

要素の重なり順を設定できるCSSプロパティ
数値が大きいほうの要素が画面の上に重なって表示されます。

z-index: 数値 ;
上記のように設定します。

z-indexなしの場合、下の画像のように要素が重なります。


例えば、Boxを手前からBox→Box2→Box1と背景の後ろにBox3を配置したいのに
上の画像のように、要素が重なって上手くいかない時にz-indexを設定します。

z-indexの設定ありの場合


.css

.section {
  position: relative;
  background-color: antiquewhite;
  width: 100px;
  height: 120px;
}
.Box {
  z-index: 3;
  position: absolute;
  background-color: darkolivegreen;
  width: 50px;
  margin-left: 10px;
  margin-top: 35px;
}
.Box1 {
  z-index: 1;
　position: absolute;
/* 省略 */
  }
.Box2 {
  z-index: 2;
　position: absolute;
/* 省略 */
  }
.Box3 {
  z-index: -1;
  position: absolute;
/* 省略 */

上のように大きい数値だと手前にマイナスだとposition:relativeの後ろに配置されます。

z-indexを設定したのに反映されない時

z-indexはpositionプロパティとセットで設定することがほとんどのようですが、 設定したい要素にpositionの設定がされていないとz-indexが反映されないので確認してみてください。 原因が分かるまでかなり戸惑いました。

参考

z-indexの使い方：CSSで重なり順を指定する

参考にさせていただきました。