z-indexの解説｜クロノドライブのCSS辞典

z-indexとはボックスの重なり順序を指定するプロパティです。
以下の値で指定します。

Auto（初期値）

親要素と同じ階層に表示されます。

数値

重なりの順序を数値で指定します。0を基準として、値が大きいものほど前面（手前）に表示されます。

positionプロパティにabsoluteやrelative、fixedが指定された要素（＝ポジショニングされた要素）でのみ有効です。
z-indexが指定されていない場合など、同じ階層の要素では基本的にソース上で後に書かれた要素が前面へ表示されます。
※なお、同じ階層でfloatの要素は他の要素より前面へ、ポジショニングされた要素はそれより前面へ、z-indexが0以上の要素はさらに前面へ表示されます。

z-indexに数値が指定された要素は、子孫要素をグループ化した階層の基準点となります（0を指定した場合でも）。
要素自体のz-indexが大きくても、階層グループのz-indexが小さい場合は後ろに表示されます。この階層グループはスタッキング文脈、スタッキングコンテキストと呼ばれています。