z-indexについて簡単にまとめた

z-indexとは？

CSSのプロパティの一つで要素の重なりを指定するために使用します。
通常、HTMLで要素を並べて行くと自然と縦・横に要素が並んで行き重なることは無いですが、
CSSに指定によっては要素が重なり合うケースが発生します。
この重なりの順番を指定するのがz-indexです。
HTMLでは縦方向・横方向の位置をそれぞれX軸・Y軸で表現するため、立体的な重なりをZ軸で表現するためz-indexというプロパティ名になっています。

基本的な使い方

下記のようにposition: relative;を利用する場合などに要素が重なる場合が出てきます。
z-indexを指定しない場合、HTMLの出現順に要素が重なって行きます。

index.html

<div class="div-1">要素1</div>
<div class="div-2">要素2</div>

index.css

.div-1 {
  background: red;
  width: 200px;
  height: 80px;
  position: relative;
  top: 20px;
  left: 10px;
}
.div-2 {
  background: blue;
  width: 200px;
  height: 80px;
  position: relative;
  top: -10px;
}

表示結果1
この重なりを変更したい場合、z-indexを指定することで重なりの順場を自由に変更することができます。
z-indexの値が大きい要素ほど上に重なる結果となります(例外あり：後述)
。

index.css

.div-1 {
  // 省略
  z-index: 2;
}
.div-2 {
  // 省略
  z-index: 1;
}

表示結果2

ちょっと複雑なパターン

前述のようにz-indexの値が大きい要素ほど上に重なるというルールだけ聞くと単純なように思えますが、そう単純にはいかないパターンもあります。
それが親要素が異なる要素の重なりを指定したいケースです。

index.html

<div class="parent-1">
  <div class="div-1">要素1</div>
</div>
<div class="parent-2">
  <div class="div-2">要素2</div>
</div>

index.css

.div-1 {
  // 省略
  z-index: 999;
}
.div-2 {
  // 省略
  z-index: 1;
}
.parent-1 {
  position: relative;
  top: 20px;
  z-index: 5
}
.parent-2 {
  position: relative;
  top: 20px;
  z-index: 6;
}

この場合、z-indexが999のdiv-1が一番上に表示されると思いきやそうはなりません。
表示結果は下記です。

表示結果3
z-indexが1の要素2が上に表示されてしまいます。
このような結果になるのは、z-indexで指定する重なり順は同じスタッキングコンテキスト上での重なり順だからです。

スタッキングコンテキストとは

スタッキングコンテキストとは要素の重なりを形成する階層構造です。
要素の重なりが発生する場合、その要素がスタッキングコンテキストに所属していることが前提となります。

表示結果3が要素2が上に表示されてしまったのは、要素1と要素2が別々のスタッキングコンテキストに所属しており、かつ要素1のスタッキングコンテキスト（=parent-1）より要素2のスタッキングコンテキスト(=parent-2)の方がz-indexが上になっているからです。

スタッキングコンテキストが生成される条件は？

下記の条件を満たす場合にスタッキングコンテキストが生成されます。

opacityでもスタッキングコンテキストが生成される点に要注意