z-index

TOPページに戻る > CSS

z-indexプロパティ

HTML要素の重なり順を指定できます。positionプロパティを指定した要素にのみ適用できます
値は整数で指定し、数が大きいほど前面で表示されます
値にautoを指定すると下に書いた要素ほど前で表示されます。autoが初期値です

使い方（書式）

セレクタ { z-index: 値; }                                    

プロパティ

対応ブラウザ
適用できる要素	positionプロパティを指定した要素
子要素へのスタイルの継承	しない

プロパティの値	説明
整数	数が大きいほど前面で表示されます
auto	auto同士の重なりは下に書いた要素ほど前で表示されます。これが初期値 整数でz-indexを指定された要素と重なる場合は、autoを指定した要素が下になります

実際の指定方法

.hoge {
 z-index: 1;                /* 重なり順が一番下 */
 position: relative;        /* 要素のレイアウトを独立させる */
 bottom: 30px;              /* 元の位置の下から30pxずらす */
 left: 10px;                /* 元の位置の左から10pxずらす */
 height: 70px;              /* 要素の高さを指定 */
 width: 70px;               /* 要素の横幅を指定 */
 border: solid 1px #00FF00; /* 枠線を表示 */
 background-color:#00FF00;  /* 背景色を指定 */
  }

.hoge2 {
 z-index: 2;                /* 重なり順が二番目 */
 position: relative;        /* 要素のレイアウトを独立させる */
 bottom: 70px;              /* 元の位置の下から70pxずらす */
 left: 20px;                /* 元の位置の左から20pxずらす */
 height: 70px;              /* 要素の高さを指定 */
 width: 70px;               /* 要素の横幅を指定 */
 border: solid 1px #6699FF; /* 枠線を表示 */
 background-color:#6699FF;  /* 背景色を指定 */
  }

.hoge3 { 
 z-index: auto;             /* 通常表示、下に書いた要素ほど前で表示されます */
 position: relative;        /* 要素のレイアウトを独立させる */
 bottom: 200px;             /* 元の位置の下から200pxずらす */
 left: 40px;                /* 元の位置の左から40pxずらす */
 height: 70px;              /* 要素の高さを指定 */
 width: 70px;               /* 要素の横幅を指定 */
 border: solid 1px #FF9900; /* 枠線を表示 */
 background-color:#FF9900 ; /* 背景色を指定 */
  }

.hoge4 { 
 z-index: auto;             /* 通常表示、下に書いた要素ほど前で表示されます */
 height: 70px;              /* 要素の高さを指定 */
 width: 70px;               /* 要素の横幅を指定 */
 border: solid 1px #9999FF; /* 枠線を表示 */
 background-color:#9999FF ; /* 背景色を指定 */
  }

html部分

<div class="hoge4">auto2</div>
<div class="hoge">z-index: 1;</div>
<div class="hoge2">z-index: 2;</div>
<div class="hoge3">auto</div>

実際の表示