z-indexプロパティは positionプロパティで位置要素されている要素の重ね合わせの順序を指定します。
z-indexプロパティに指定できる値はそれぞれ以下の意味を示します。
z-indexプロパティの指定がない場合と同様、通常の順番で重ねられて表示される。z-indexプロパティの指定がない場合、及び z-indexプロパティに "auto" が指定されている場合の位置要素されている要素の重なり方は、文書のソース内であとに記述されている要素ほど上に重ねられて前面に表示されることになります。また、位置要素されている要素と、位置指定されていない要素(position : static ; が指定された要素、及び positionプロパティの指定されていない要素)とでは、位置指定された要素が上に重なって前面に表示されることになります。そこで、z-indexプロパティは重ね合わせの順番が上手くいかないときに、ソース内で要素が記述されている位置に関係なく、要素の重ね合わせる順序を調整することができます。
iframe要素に対する指定は無効)Macintosh版Internet Explorer 5 では、位置指定されている iframe要素に、z-indexプロパティを指定しても無効になり、常にインラインフレームが前面に表示される実装となっています。
p { width : 150px ; height : 30px ; position : absolute ; }
......
<div style="position : absolute ;">
<p style=" z-index : 3 ; top : 50px ; left : 250px ;
color : black ; background : red ;">z-index : 3 ;</p>
<p style=" z-index : 1 ; top : 70px; left : 20px ;
color : black ; background : yellow ;">z-index : 1 ;</p>
<p style="top : 10px ; left : 0 ;
width : 420px ; height : 150px ; text-align : center ;
color : white ; background : black ;">z-index指定なし</p>
<p style="z-index : 2 ; top : 60px ; left : 135px ;
color : white ; background : blue ;">z-index : 2 ;</p>
</div>