z-index(ゼット・インデックス)について

重なっている要素の順序を設定するプロパティです。
重ねることが可能なpositionプロパティでrelative・absolute・fixedを使用した際に利用します。

z-index(ゼット・インデックス)の概念図

z-indexのブラウザ表示例

■CSS記述
.sample1 { width:500px; height:100px; position:relative; }

.sample2 { color:#fff; padding:10px; position:absolute; z-index:3; background-color:#f00; }

.sample3 { color:#fff; padding:10px; position:absolute; top:30px; left:50px; z-index:2; background-color:#00f; }

.sample4 { color:#fff; padding:10px; position:absolute; top: 60px; left:100px; z-index:1; background-color:#090; }
■XHTML記述
<div class="sample1">

<p class="sample2">z-index:3;</p>

<p class="sample3">z-index:2;</p>

<p class="sample4">z-index:1;</p>

</div>

z-index:3;

z-index:2;

z-index:1;

z-index(ゼット・インデックス)の設定方法

z-index: (値);

z-index(ゼット・インデックス)の値

数値
0以上の整数値で指定します。数値が大きいほど最前面に表示されます。
auto
親要素と同じ階層にする。