CSS 要素の重なる順番を指定するサンプル(z-index)

CSSの要素の重なる順番を指定するサンプルです。
z-indexを使用します。

z-index プロパティ

z-index : 値
説明
数値 数値が大きいほど前面に表示されます。
auto 記述した順番で表示されます。(初期値)
値を継承しない

サンプル

z-indexプロパティのサンプルです。

z-indexを以下のように設定した場合
・box1はz-index:10
・box2はz-index:20
・box3はz-index:30
box3が一番前面に出ます。

 

z-indexを以下のように設定した場合
・box1はz-index:110
・box2はz-index:20
・box3はz-index:30
box1が一番前面に出ます。

 

z-indexを以下のように設定した場合
・box1はz-index:10
・box2はz-index:120
・box3はz-index:30
box2が一番前面に出ます。

コード

上記サンプルのコードです。
7行目にz-index:10、14行目にz-index:20、21行目にz-index:30としています。

<style>
#box1{
	position:absolute;
	top: 25px;
	left:70px;
	background-color:#E0FFFF;
	z-index:10;
}
#box2{
	position:absolute;
	top: 50px;
	left:140px;
	background-color:Cornsilk;
	z-index:20;
}
#box3{
	position:absolute;
	top: 35px;
	left:210px;
	background-color:BurlyWood;
	z-index:30;
}
#d1 div{width: 150px;height:50px;border:1px solid #000;}
</style>
<body >
<div id="d1">
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
</div>
</body>

関連の記事

CSS 要素の枠内の余白を指定するサンプル(padding)
CSS 要素の枠外の余白を指定するサンプル(margin)
CSS 幅と高さを指定するサンプル(widthとheight)
CSS テーブルの枠線を重ねる/離すサンプル(border-collapse)
CSS テーブルの枠線の間隔を指定するサンプル(border-spacing)
CSS 回り込みと解除のサンプル(floatとclear)
CSS ボックスの配置のサンプル(positionのrelative)
CSS ボックスの配置のサンプル(positionのabsolute)
CSS ボックスの配置のサンプル(positionのfixed)
CSS 幅と高さのパディング、ボーダーの表示方法を指定するサンプル(box-sizing)
CSS ボーダーの表示方法を指定するサンプル(border)
CSS 要素のボックスの種類を指定するサンプル(display)

△上に戻る