W3G

z-indexプロパティの値

z-indexプロパティに指定できる値はそれぞれ以下の意味を示します。

<整数値>

小数点を含まない10進数値。CSS2.1より負の値も指定可能。指定された値が大きいほど上に重ねられ、要素は手前に表示される。

auto

z-indexプロパティの指定がない場合と同様、通常の順番で重ねられて表示される。

z-indexプロパティの指定がない場合、及び z-indexプロパティに "auto" が指定されている場合の位置指定されている要素の重なり方は、文書のソース内であとに記述されている要素ほど上に重ねられて前面に表示されることになります。また、位置指定されている要素と、位置指定されていない要素（position : static ; が指定された要素、及び positionプロパティの指定されていない要素）とでは、位置指定された要素が上に重なって前面に表示されることになります。そこで、z-indexプロパティは重ね合わせの順番が上手くいかないときに、ソース内で要素が記述されている位置に関係なく、要素の重ね合わせる順序を調整することができます。

z-indexプロパティの実装状況

IE

◯：IE6, 7では親要素にz-indexが指定されると、その子要素の兄弟要素間でしかz-indexの効果がありません

Firefox

◯

Opera

◯

Chrome

◯

Safari

◯

iOS

◯

Android

◯

サンプル

p { width : 150px ; height : 30px ; position : absolute ; }
......
<div style="position : relative ; height : 180px ;">
<p style="top : 40px; left : 180px ; z-index : 3 ; color : black ; background : red ;">z-index : 3 ;</p>
<p style="color : black; background : yellow; top : 80px; left : 20px; z-index : 1 ;">z-index : 1 ;</p>
<p style="text-align:center; color : white; background : #999; width : 300px; height : 150px; top : 0; left : 0;">z-index指定なし</p>
<p style="color : white; background : blue; top : 60px; left : 100px; z-index : 2;">z-index : 2 ;</p>
</div>