z-indexプロパティ(重なりの順序)

z-indexプロパティを利用して要素(ボックス)の重なりの順序を指定することができる。値は「0」を基準とした整数(数が大きい方が前面、マイナス値も設定可)、またはauto(親ボックスと同じ)で設定される。z-index の「z」は3次元空間で配置される軸のz座標(縦軸はy座標、横軸はx座標)を意味する。

z-indexプロパティは、positionプロパティで static以外(relative、absolute、fixed のいずれか)の値をもつ要素にしか適用されない。



書き方:

要素名 {
	z-index : 整数 または auto ;
}


例:p要素を絶対配置で、重なり順序をA(前面)、B(中間)、C(背面)に配置する。


◆html

	<p id="a">重なり順序A</p>
	<p id="b">重なり順序B</p>
	<p id="c">重なり順序C</p>

◆CSS

 
	p#a { 
	    z-index : 3 ; 
	    position:absolute ;
	}
	p#b { 
	    z-index : 2 ; 
	    position:absolute ;
	}
	p#c { 
	    z-index : 1 ; 
	    position : absolute ;
	}

go to top