Go to information

z-index

z-indexプロパティは positionプロパティ位置要素されている要素の重ね合わせの順序を指定します。

初期値
auto
適用対象
位置要素されている要素
継承
しない
メディア
visual

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

<整数値>
小数点を含まない10進数値。負の値も指定可能。指定された値が大きいほど上に重ねられ、要素は手前に表示される。
auto
z-indexプロパティの指定がない場合と同様、通常の順番で重ねられて表示される。

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

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

Windows版Internet Explorer
Firefox
Opera
Safari
Macintosh版Internet Explorer 5
○(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>
表示例
現在位置
  1. W3G
  2. CSS
  3. 表示と配置
  4. z-index
ナビゲーション
ステータス情報
作者
上田 遼
公開
2007-02-02T17:50:16+09:00
更新
2008-12-29T04:30:41+09:00
URI
http://w3g.jp/css/display_position/z-index
検索