z-indexは、ページに表示するコンテンツのZ軸方向の順序を決定できるので、何かとお世話になります。

z-indexを使用する際に頭に入れておいた方が良い事をまとめておきたいと思います。
ある案件で、z-indexへの考慮が足らなかった為、それへの対応に調べた内容になります。

そもそもz-indexとは

Z 軸方向の順序を設定します。
これにより、大きいz-indexの値を持つ要素は、自身より小さな値を持つ要素に重なります。（3次元的には上になります）

プロパティ

設定できる値の内容はauto 数値です。
マイナスも設定できます。
（https://developer.mozilla.org/ja/docs/Web/CSS/z-index）

注意する事

表示の順序が決まる過程 が大事だと思います。

z-indexの指定がない場合はどうなる？

以下の順序で、Z軸方向に重なります。

1.ルート要素の背景と境界
2.位置指定なしのブロックの子孫、 HTML 内での出現順
3.位置指定要素、 HTML 内での出現順
（引用元：https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index）

記述の順番と、位置指定要素（position: static以外のposition）で順番が決まります。

z-indexの指定がある場合

z-indexの値と、前述の順序で決まります。

また、同じz-indexの値の場合は、前述の順序が密接にかかわります。
例えば下記の場合、「DIV class01」と「DIV class02」は、class02が上部になります。

<div class="class01">
  DIV class01
</div>
<div class="class02">
  DIV class02
</div>

div {
  padding: 10px;
  opacity: 0.7;
  text-align: center;
}
.class01 {
  z-index: 5;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 10px;
  left: 10px;
  border: 1px dashed #900;
  background-color: #fdd;
}
.class02 {
  z-index: 5;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 50px;
  left: 50px;
  border: 1px dashed #696;
  background-color: #cfc;
}

さらに、子要素にz-indexが設定してる場合、子要素間の順序と親要素間の順序が関わってくるため、整理しておかないと混乱の原因になるかと思います。
どのような順番になるのかを頭に入れておくことで、手戻りを無くせると思います。

その他

調べていて分かったのですが、重ね合わせは、実はさらに多くの要素が関係します。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#The_stacking_context

参考

z-index：
https://developer.mozilla.org/ja/docs/Web/CSS/z-index
z-index の利用：
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
z-index なしの重ね合わせ：
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index
重ね合わせコンテキスト：
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context