z-index（重ね順序）

解説

ポジション（position）によってエレメント（要素）が重なった場合、重ね順序を指定する属性です。

値	数値（整数）：0を基準にプラスは上面、マイナスは背面 auto：自動的に指定（HTMLで記述した順番に上面）
初期値	auto
%値の基準
適用	位置指定されるエレメント
継承	しない

対応状況

全ての値

使用例

ソース

表示＆操作

スタイル部に、

div{border:inset 3px red;width:200px;padding:10px;}
.yellow{position:absolute;top:525px;left:420px;
background-color:yellow;}
.aqua{position:absolute;top:550px;left:520px;
background-color:aqua;z-index:1;}
.lime{position:absolute;top:600px;left:470px;
background-color:lime;z-index:0;}

と記述し、

と表示されます。（

の場合、td内に記述すると動
作しません。だから、このテーブルの下に記述して
ます。）

body部に、

<div class="yellow">絶対位置指定にて上から525px、
左から420pxの位置です。z-indexの指定無し。よって、
このレイヤーが一番背面に配置されます。</div>
<div class="aqua">絶対位置指定にて上から550px、
左から520pxの位置です。z-indexの値は1です。よって、
このレイヤーが一番上面に配置されます。</div>
<div class="lime">絶対位置指定にて上から600px、
左から470pxの位置です。z-indexの値は0です。よって、
このレイヤーが中間面に配置されます。</div>

と記述すると。

絶対位置指定にて上から525px、左から420pxの位置です。z-indexの指定無し。よって、このレイヤーが一番背面に配置されます。

絶対位置指定にて上から550px、左から520pxの位置です。z-indexの値は1です。よって、このレイヤーが一番上面に配置されます。

絶対位置指定にて上から600px、左から470pxの位置です。z-indexの値は0です。よって、このレイヤーが中間面に配置されます。

pokochan@mx1.tees.ne.jp