WEB技術の辞書・解説・使用例

TOP > CSS >  CSS辞典 > z-index
z-index  配置 

重なり順序を指定する。

このエントリーをはてなブックマークに追加

position:static;以外の値を指定してください。。

z-indexプロパティは、ボックスの重なりの順序を指定する際に使用します。 z-indexプロパティは、positionプロパティでstatic以外の値が指定されている要素に適用されます。

書式

(例) z-index:3 ;

パラメーター

数値
　値が大きいものほど上。
auto
　親要素と同じ(初期値)。

サンプルコード

<div style="background-color:#fff0f0; border:1px solid red; height:50px; width:50px; position:absolute;top:10px;left:50px;z-index:3;">
●1番目
</div>
<div style="background-color:#f0f0ff; border:1px solid blue; height:50px; width:150px; position:absolute;top:20px;left:90px;z-index:1;">
●3番目
</div>
<div style="background-color:#f0fff0; border:1px solid green; height:50px; width:50px; position:absolute;top:30px;left:150px;z-index:2;">
●2番目
</div>

●1番目
●3番目
●2番目