cssで要素(レイヤー)の重なり順序を指定する【z-index】

「position」プロパティで要素の位置を指定したら意図していない順に重なってしまった。そんなときは「z-index」プロパティで要素の表示階層（重なりの順序）を指定します。

z-indexプロパティに指定できる値

auto

親要素と同じ階層に表示。つまり「z-index」プロパティの指定がない場合と同様に、通常の順序で重ねられて表示する。（初期値）

整数値

小数点を含まない整数（負の値も指定可能）で指定する。指定された値が大きいほど前面（手前）に表示される。 （0 が基準値）

z-indexの値は数値が大きいほど前面に表示され、要素がたくさんあるのなら、いくらでも増やせます。
※重なりの順序の指定は、positionプロパティで relative、absolute、fixed を指定している場合に有効になります。

「z-index」表示例

表示

コード

.zindex p {
  width: 130px;
  height: 50px;
  position: absolute;
}

#親要素にz-index: 0;を指定している場合
<div style="position: relative; height: 200px; z-index: 0;" class="zindex">
<p style="color: black; background: Pink; top: 40px; left: 340px; z-index: 3;">z-index : 3 ;</p>
<p style="color: black; background: Moccasin; top: 80px; left: 180px; z-index: 1;">z-index : 1 ;</p>
<p style="text-align:center; color: white; background: #999; width: 500px; height: 140px; top: 0; left: 0; opacity:0.6;">z-index指定なし</p>
<p style="color: white; background: Turquoise; top: 60px; left: 260px; z-index: 2;">z-index : 2 ;</p>
<p style="color: white; background: DeepSkyBlue; top: 120px; left: 20px; z-index: -1;">z-index : -1 ;</p>
<p style="color: white; background: LightGreen; top: 100px; left: 100px; z-index: 0;">z-index : 0 ;</p>
</div>

まとめ
「z-index」プロパティの整数値（正と負と0）の重なる順序は下から、
親要素 / -1 / 0(指定なし) / 1 / 2 / 3 /・・・
となります。
0と指定なしの重なり順の指定は同じなので、後から記述しているものが方が上にきます。