【z-index】要素の重なりの順序を指定

z-indexプロパティでは、絶対配置や相対配置が指定されている要素(ボックス)の重なりの順序を設定することができます。 通常表示される状態を「0」とし、「1」など、指定する値が大きくなるほど上に表示(重ねられて表示)されます。

なおz-indexプロパティを有効にするには、positionプロパティでstatic以外の値を指定する必要があります。

※z-indexが効かない場合は、positionプロパティで「relative」「absolute」「fixed」のいずれかの値を指定して下さい。positionの初期値は「static」ですので、上記のいずれかの値を指定しない限りz-indexは適用されませんので注意して下さい。

書式

  • z-index : ……… 要素の重なる順序を指定

★:整数値、auto、inherit

整数値
「0」を基準として、重なりの順序を整数で指定します。数値が大きくなるほど上(前面)に重ねられ、数値が小さくなるほど下(背面)に表示されます。マイナスの値を指定する事も可能です。また自分自身を親としたローカルな階層も作成されます。
auto
記述した順番で重ねられて表示されます(親要素と同じ階層に重ねられる)

使用した時の例

div {position:relative; background:#EEF4FA; width:300px; height:50px;}

.sample1 {z-index: 2;}
.sample2 {z-index: 1; top: -10px; left: 50px; background:red;}
<div class="sample1">【.sample1】z-index: 2;</div>
<div class="sample2">【.sample2】z-index: 1;</div>

ブラウザ上の表示例

【.sample1】z-index: 2;
【.sample2】z-index: 1;

対応ブラウザなどのデータ

初期値 auto 値の継承 継承しない
適用可能な要素 positionプロパティでstatic以外の値を指定した要素
メディア visual
対応ブラウザ Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera4~ , Safari1~

関連情報