ボックスの重ね順

説明

z-index: z-index; C2- ie4- N4-

値:	auto \| <整数値> \| inherit

初期値：auto、適用要素：ポジション要素(positionプロパティの値がstatic以外の要素)、継承：しない、%値：なし、メディア：ビジュアル

z-indexは、指定した要素の重ね順を設定するプロパティです。値が大きいものほど手前に表示されます。

z-indexには負の値を指定することもできます。また、同じ重ね順を持つ要素は、後に記述されたものほど手前に表示されます。

使用例


<img src="cat-naked.jpg" alt="cat"

 style="position:absolute; width:60px; height:60px; z-index:3; top:0px; left:0px">

<img src="cat-naked.jpg" alt="cat"

 style="position:absolute; width:60px; height:60px; z-index:2; top:40px; left:40px">

<img src="cat-naked.jpg" alt="cat"

 style="position:absolute; width:60px; height:60px; z-index:1; top:80px; left:80px">

z-index プロパティの値

auto	C2- ie4- N4- 重ね順を親要素と同じ階層にします。ローカルな重ね順は設定されません。初期値。
整数値	C2- ie4- N4- 通常の状態を「0」として、要素の重ね順を整数値で指定します。値が大きいものほど手前に表示されます。また、同時に自身を親とするローカルな重ね順「0」を設定します。

z-indexのレンダリング

.eg1 {position:absolute; top:10px; left:10px; width:100px; height:100px; background:#9cf; z-index:2;}
.eg2 {position:absolute; top:20px; left:90px; width:100px; height:100px; background:#cc6; z-index:1;}
.eg3 {position:absolute; top:30px; left:170px; width:100px; height:100px; background:#9c6; z-index:3;}
.eg4 {position:absolute; top:40px; left:250px; width:100px; height:100px; background:#f66; z-index:0;}

.eg5 {position:absolute; right:250px; bottom:40px; width:100px; height:100px; z-index:12;}
.eg6 {position:absolute; right:170px; bottom:30px; width:100px; height:100px; z-index:13;}
.eg7 {position:absolute; right:90px; bottom:20px; width:100px; height:100px; z-index:11;}
.eg8 {position:absolute; right:10px; bottom:10px; width:100px; height:100px; z-index:10;}

ボックスの重ね順 (Specifying the stack level)

説明

使用例

z-index プロパティの値

z-indexのレンダリング