| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {z-index: 値 } |
| 値 の形式 | auto | 数値 （優先順） |
| 初 期 値 | auto |
| 対応ブラウザー | C2+ / e4+ / N6+ / Fx1+ / Op4+ / Ch1+ / Sa1+ |
| 適用可能な要素 | ポジショニングされた要素 |
| 継 承 | しない |
z-indexプロパティ は，要素の重なりの順序を指定します。
指定できる値の形式は，以下のとおりです。
| 値 | 説 明 |
|---|---|
| auto | ボックスの表示順序はブラウザーが決定します。 （初期値） |
| 数 値 | 表示の順序を最後面から順に大きくなる整数値で指定します。 |
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css" media="screen, handheld, print, tv" >
<!--
div.sample {
position: absolute;
padding: 2px;
width: 100px;
height: 100px;
border: 1px solid #555555;
}
div.zind1 { z-index: 1; top:60px; left:30px; background:#993399; }
div.zind2 { z-index: 2; top:90px; left:60px; background:#339999; }
div.zind3 { z-index: 3; top:30px; left:90px; background:#999933; }
-->
</style> |
| HTML <body> ～ </body> |
<div style="position:relative; height:240px"> <div class="sample zind2">2:X</div> <div class="sample zind3">3:Y</div> <div class="sample zind1">1:Z</div> </div> |
| ブラウザー 表示例 |
|---|
2:X
3:Y
1:Z
|
上の例では，マークアップの順番は，z-index の値で，2 → 3 → 1 となっていますが， 表示の順番は，この順に描いた形にはなっていません。
つまり，２番目にマークアップした「Y」の部分が z-index の値 3 をもち最大であるので， 最前面に表示されています。 最後にマークアップした「Z」の部分は z-index の値が 1 で最小であるので，最後面に表示されています。