z-indexプロパティは、位置指定されている要素（positionプロパティの値がstatic以外の要素）のZ軸方向のスタックレベル（重なりの順序）を指定します。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

プロパティの解説

値

<整数>｜auto｜inherit

初期値

auto

適用される要素

位置指定されている要素

継承

しません

パーセント値

N/A

メディア

visual

値の解説

<整数>

1～9までの数字を1つ以上並べたもので、数字が大きい程前面に表示され、マイナス値の指定も可能です。
値が同じ場合は、ソース上、後に書かれている要素が前面に表示されます。

auto

スタックレベルを親要素と同じレベルにします。

z-indexのサンプル

<div class="sample01">
<p class="z01">01</p>
<p class="z02">02</p>
<p class="z03">03</p>
<p class="z04">04</p>
<p class="z05">05</p>
</div>

<div class="sample02">
<p class="z01">01</p>
<p class="z02">02</p>
<p class="z03">03</p>
<p class="z04">04</p>
<p class="z05">05</p>
</div>

.sample01 {
  position: relative;
  height: 260px;
  border-bottom: 3px double #666;
}
.sample02 {
  position: relative;
  height: 260px;
}

p {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid #fff;
}

.z01 {
  top: 20px;
  left: 100px;
  background: #ccf;
}
.z02 {
  top: 50px;
  left: 20px;
  background: #fcf;
}
.z03 {
  top: 70px;
  left: 180px;
  background: #ffc;
}
.z04 {
  top: 90px;
  left: 70px;
  background: #cfc;
}
.z05 {
  top: 140px;
  left: 120px;
  background: #cff;
}

.sample02 .z01 {
  z-index: 3;
}
.sample02 .z02 {
  z-index: 1;
}
.sample02 .z03 {
  z-index: 5;
}
.sample02 .z04 {
  z-index: 2;
}
.sample02 .z05 {
  z-index: 4;
}

ちょっとCSSソースが長いですが、上にある最初のサンプルはスタックレベルを調整していないので05が一番前面に来ますが、下にある二つ目のサンプルがz-indexプロパティによってスタックレベルを調整しているので重なり順が変わっています。

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

01

02

03

04

05

01

02

03

04

05