z-index
CSSの書き方
z-index:値 ;
| CSSの詳細情報 | |||||
|---|---|---|---|---|---|
| プロパティ名 | z-index | 読み方 | ゼット・インデックス | ||
| 初期値 | auto | 意味 | レイヤーの重なりを指定 | ||
| 値 | auto/0以上整数 | ||||
| 対象 | 位置を定められる要素 | ||||
| CSSレベル | CSSレベル2 | 対応ブラウザ | Windows | MAC | |
| 継承 | しない | IE 5.0以上/FF1.0/NS7.1/OP8.0 | SF/IE5.0 | ||
解説
「z-index」プロパティは、「position」プロパティで重なってしまった要素の表示階層（重なりの順序）を指定できます。
値は「auto」または「0以上の整数値」です。
値（auto）
「z-index:auto;」とした場合、その要素を含む親要素と同じ階層（レイヤー）に表示されます。
値（0以上の整数値）
一方、「z-index:0以上の整数値;」とした場合、「z-index」プロパティが指定されている要素のうち、数字が大きい順番に重なりの順序が決まります。
従って、一番数字大きい値を持つ要素が最前面に表示され、一番小さい数字の要素が最背面に表示されます。
CSS/HTMLサンプル
p { width:250px; height:250px; position:absolute; }
p.z0 { top:50px; left:50px; z-index:0; background:#f6f6f6; }
p.z1 { top:100px; left:100px; z-index:1; background:#ffdff9; }
クラス指定をした段落要素の重なりの順序を指定 サンプル
