要素の重なり優先順を指定

cocohp

7年前

z-index:値

値は整数で入力し、大きい数値のものほど手前に表示される。(ゼロ開始やマイナス値も有効)
※（注意）要素は、ポジションプロパティで指定し、基本的にはabsoluteであることが前提である。
︎　ポジションプロパティとは

/*後ろの赤いボックス*/
#item01{
width:180px;height:180px;
background-color:red;
position:absolute;top:100px;left:150px;
z-index:0;}
/*手前の青いボックス*/
#item02{width:200px;height:200px;
background-color:blue;
position:absolute;left:190px;top:30px;
z-index:1;}

/*後ろの赤いボックス*/

#item01{

width:180px;height:180px;

background-color:red;

position:absolute;top:100px;left:150px;

z-index:0;}

/*手前の青いボックス*/

#item02{width:200px;height:200px;

background-color:blue;

position:absolute;left:190px;top:30px;

z-index:1;}

【逆転バージョンも試してみましょう】