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; }
クラス指定をした段落要素の重なりの順序を指定 サンプル