はじめに

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

z-indexってなんだろう

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

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

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

![z-index0.png](https://qiita-image-store.s3.amazonaws.com/0/361055/75586a33-aab7-d85d-81d7-8d59a98ac850.png)

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

z-indexの設定ありの場合

![z-index1.png](https://qiita-image-store.s3.amazonaws.com/0/361055/ab4591fe-7a66-1256-d89f-0af888054acd.png)

.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で重なり順を指定する

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