z-index 要素の重ね順

z-index:(値)
・重なって配置された要素の重ね順を指定する。positionにabsolute／relative／fixedが設定されている要素が対象で、継承しない。
・z-indexを指定していない通常の場合、要素が重なった時HTMLソース内の記述が後のものほど前面になる。

(値)
　auto ･･･（初期値）HTMLソースで出現した順番に下から上に重ねられる。
　整数値･･･値が大きなものが小さいものの上に重ねられる。もし、同じ値が設定され
　　　　た場合には、ソース順に重ねられる。マイナス(-)値も可。

Sample

右例はz-indexを指定していない。
記述順は

(1)ピンク背景
(2)壁
(3)梅に鶯
(4)文字列

背景

z-index 重ね順変更

右例はz-indexを以下のように指定。

ピンク背景 z-index:-1
壁 zindex:2
梅に鶯 z-index:1
文字列 z-index:0

背景

z-index 重ね順変更

★下のテキストBoxにz-indexの整数値を入力し、を押して下さい。
（数値が大きいほど上になります。マイナス(-)数値も入力できる）　

ピンク背景壁梅文字列　

★要素をクリックすれば一番上になります(上のテキストBoxの数値も変化する）
（背景をクリックすると最上部になり、他の要素をクリックできない。その場合上の数値で変更してください）

Sample Source......................................................................>>>

<script language="JavaScript"><!--
function zIndexChange(){  
  img1.style.zIndex = img1t.value;
  img2.style.zIndex = img2t.value;
  dv.style.zIndex = dvt.value;
  txt.style.zIndex = txtt.value;
}

function Top(obj){
  mx = Math.max(dvt.value,img1t.value);
  mx = Math.max(mx,img2t.value);
  mx = Math.max(mx,txtt.value);
  document.all(obj).style.zIndex = mx + 1;
  textN = eval(obj + "t");
  textN.value = mx + 1;
}
//--></script>
</head>
<body>

<div style="position:absolute;top:560px;left:370px;width:140px;height:150px;">
   <p class="sample">右例はz-indexを以下のように指定。<br><br>
     ピンク背景 z-index:-1<br>
     壁 zindex:2<br>
     梅に鶯 z-index:1<br>
     文字列 z-index:0</p>
</div>
<div style="position:absolute;top:540px;left:530px;;width:300px;height:150px;">
  <div id="dv" style="position:absolute;top:20px;left:20px;z-index:-1;width:250px;height:130px;
        background-color:#fff0f5" onclick="Top(this.id);">背景</div>
  <img id="img1" style="position:absolute;top:70px;left:65px;z-index:2;" 
        src="../../images/bg/tairu1.gif" onclick="Top(this.id);">
  <img id="img2" style="position:absolute;top:20px;left:75px;z-index:1;"
        src="../../images/cut/umeuguisu.gif" onclick="Top(this.id);">    
  <p id="txt"  style="position:absolute;top:65px;left:35px;z-index:0;font:24px 'Arial Black';
        border:1px dotted navy" onclick="Top(this.id);">z-index 重ね順変更</p>  
</div>