HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


ボックス(レイヤー)の重なり順序を指定する

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; }

クラス指定をした段落要素の重なりの順序を指定 サンプル