z-index:要素の重なり順を指定する

適用対象 位置指定が有効な要素
継承 しない

z-indexプロパティは、位置指定されている要素の重なり順序を指定する際に使用します。通常、HTMLのソースコードでは、後の方に記述した要素の方がより手前に表示されます。z-indexプロパティを指定した要素は、数字が小さいほど奥へ、大きいほど手前に表示されます。これをスタックレベル(stack level)と言います。

divなどのブロックレベル要素でボックスを入れ子にした際に、positionプロパティで static以外の値が指定されている場合、それぞれの要素はレイヤー状(アニメのセル画のような状態)に重なっているため、親要素の幅や高さに関係なく好きな所に配置出来ます。背景色や、背景画像を指定している場合に、思わぬ所で要素が隠れてしまったり、見た目に不都合が生じる場合もあります。z-indexプロパティは、それを回避するためのものです。

上からの距離:topプロパティ
右からの距離:rightプロパティ
下からの距離:bottomプロパティ
左からの距離:leftプロパティ
重なる順序 :z-indexプロパティ

z-indexに与えられる値

z-index: auto;
親要素と同じ階層になります。これが初期値です。
z-index: 数値で指定する;
重なりの順序を整数で指定します。0を基準として値が大きいものほど上になります。マイナス値の指定も可能です。

z-indexの使用サンプル

CSS
.box_sample01 {
 z-index: 1;
 position: relative;
 height: 300px;
 border: 1px solid #333333;
 padding: 5px;
}
.box_sample02 {
 z-index: 3;
 position: absolute;
 top: 30px;
 left: 30px;
 height: 100px;
 border: 1px solid #666666;
 background-color: #FFCCCC;
 padding: 5px;
}
.box_sample03 {
 z-index: 2;
 position: absolute;
 top: 100px;
 left: 100px;
 height: 100px;
 border: 1px solid #666666;
 background-color: #CCCCFF;
 padding: 5px;
}
XHTML
<div class="box_sample01">
box_sample01 [z-index: 1;]<br />

<div class="box_sample02">
box_sample02 [z-index: 3;]<br />
Z軸の重なり具合を指定します。
</div>

<div class="box_sample03">
box_sample03 [z-index: 2;]<br />
Z軸の重なり具合を指定します。
</div>

</div>
表示確認
box_sample01 [z-index: 1;]
box_sample02 [z-index: 3;]
Z軸の重なり具合を指定します。
box_sample03 [z-index: 2;]
Z軸の重なり具合を指定します。

z-indexに関連するCSSプロパティ

要素の表示や配置方法
bottom 位置指定で配置された要素の底辺からの距離を指定する
break-after ボックスの終了時にページやカラムをどのように区切るかを指定する
break-before ボックスの開始前にページやカラムをどのように区切るかを指定する
break-inside ボックスの途中でページやカラムをどのように区切るかを指定する
clear フロート(float)の回り込みを解除する
clip 要素を切り抜いて可視化する範囲を指定する
box-decoration-break 要素の断片が複数の行やページに渡る場合に装飾の表示の仕方を指定する
display 要素の表示形式を指定する
float 要素を右または左へ寄せて配置する
left 位置指定で配置された要素の左辺からの距離を指定する
overflow 要素からはみ出した内容の表示方法をまとめて指定する
overflow-wrap 長い単語の折り返し方法について指定する
overflow-x 要素からはみ出した内容の水平方向の表示方法を指定する
overflow-y 要素からはみ出した内容の垂直方向の表示方法を指定する
position 要素の配置方法について相対的か絶対的にするかを指定する
right 位置指定で配置された要素の右辺からの距離を指定する
vertical-align ボックス内のインライン要素に縦位置を揃える基準を指定する
visibility 要素の領域を残したまま表示・非表示を指定する
z-index 要素の重なり順序を指定する