CSS-P Syntax:

Source of This Sample:

[NN4][IE4]共通

[NN4]のLAYERタグと同じ

同じ意味だけど違ういいまわしのExamples:

z-index

レイヤ−の重なりを番号で指定する

{ z-index : 数値 | auto }

ID名、position:absolute(絶対位置指定)またはposition:relative(相対位置指定)とセットで使います。

<DIV ID="layer10000" 
  STYLE="position:absolute;
         left:50px;
         top:45px;
         z-index:0">
<IMG SRC="zi.gif"></DIV>
<DIV ID="layer10001" 
  STYLE="position:absolute;
         left:98px;
         top:45px;
         z-index:1">
<IMG SRC="nd.gif"></DIV>
<DIV ID="layer10002" 
  STYLE="position:absolute;
         left:146px;
         top:45px;
         z-index:0">
<IMG SRC="ex.gif"></DIV>

で、この3つのレイヤのzIndexをボタンクリックで変更して前へ移動させています。STYLE定義するときはz-indexですがscriptで処理する時はzIndex(ｉが大文字)になるのに注意。

<SCRIPT>
var z=2;
function zindexLAYER(layName,n){
  if(document.layers)document.layers[layName].zIndex=n
  if(document.all)document.all(layName).style.zIndex=n
}
</SCRIPT>
<FORM>
<INPUT TYPE="button" VALUE=" ZI" onClick="zindexLAYER('layer10000',z++)">
<INPUT TYPE="button" VALUE="ND"  onClick="zindexLAYER('layer10001',z++)">
<INPUT TYPE="button" VALUE="EX " onClick="zindexLAYER('layer10002',z++)">
</FORM>

<LAYER NAME="layer0"
            LEFT="50"
            TOP="50"
            ZINDEX=1>
LAYER
</LAYER>

1.ID名で指定したものにだけスタイル定義します

<STYLE>
<!--
#layer0 {position:absolute;z-index:1}
<!---->
</STYLE>

<DIV ID="layer0">
LAYER
</DIV>

2.CLASS名で複数のタグへ一度にスタイル定義します

<STYLE>
<!--
.zclass {position:absolute;z-index:2}
<!---->
</STYLE>

<DIV ID="layer0" CLASS="zclass">
LAYER0
</DIV>
<DIV ID="layer1" CLASS="zclass">
LAYER1
</DIV>
<DIV ID="layer2" CLASS="zclass">
LAYER2
</DIV>

3.タグ名で指定したタグへ一度にスタイル定義します

<STYLE>
<!--
DIV {position:absolute;z-index:3}
<!---->
</STYLE>

<DIV ID="layer0">
LAYER0
</DIV>
<DIV ID="layer1">
LAYER1
</DIV>
<DIV ID="layer2">
LAYER2
</DIV>