基礎講座 (後編)

z-index

要素の重なり順を定義

z-index は、要素を「前面」「背面」のどちらに配置するかを指定するプロパティです。値には、整数で入力し、大きい数値のものほど手前に表示されます。(ゼロ開始やマイナス値も有効)

要素の重なり順

赤色のパネルが、最も手前に配置される。

#wrap{position:relative;
height:150px;
}
#red{position:absolute;
width:80px;height:80px;
background-color:red;
z-index:3;}

#blue{position:absolute;
width:80px;height:80px;
background-color:blue;
left:80px;top:80px;
z-index:2;}


#yellow{position:absolute;
width:80px;height:80px;
background-color:yellow;
left:20px;top:30px;
z-index:1;}

yellowを最後に記述しても、最も後面になります。

<div id="wrap_sample">
<div id="red"></div>
<div id="blue"></div>
<div id="yellow"></div><!----yellowを最後に記述しても、最も後面になる--->
</div>
TOP