z-index

重なった要素の前後の重なり順を整数で決めるプロパティ。選んだカードがほかのカードの前や後ろへ移る様子を比べられます。

遊んでみよう

同じ重ね合わせコンテキスト内で比較

X変更Az-index: 0Bz-index: 2Cz-index: 4

auto

CSS

.element z-index: auto;

値のパターン

手前へ出す順番 z-index

z-indexの構成要素

01auto | <integer>

autoか整数を指定する

初期値autoのほか、-1、0、3のような単位なしの整数を使います。小数やpxは指定できません。

02smaller → behind

小さい値は奥へ置く

同じ重ね合わせコンテキストの中では、小さい重なりレベルの要素ほど奥側に描画されます。

03larger → front

大きい値は手前へ置く

比較できる要素どうしなら、大きい重なりレベルを持つ要素が小さい値の要素を覆います。

早見表

初期値はautoです。位置指定要素やFlexbox・Gridの項目に使えます。整数値は要素と子孫をまとめる新しい重ね合わせコンテキストも作ります。

01auto通常の描画順に従う初期値

02-1レベル0より奥へ置く負の整数

030重なりレベル0に置く整数

041レベル0より手前へ置く正の整数

0531や2より手前へ置く正の整数

0654までの要素より手前へ置く正の整数

07inherit親要素の指定値を受け継ぐグローバル

よくある使い方

カードのバッジを手前へ出す

画像と重なるバッジへ正の整数を指定すると、同じカード内で画像より手前に表示できます。

.badge { position: absolute; z-index: 1; }

固定ヘッダーを本文より手前へ置く

スクロール中に本文がヘッダーを覆わないよう、配置したヘッダーへ重なり順を指定します。

.site-header { position: sticky; top: 0; z-index: 10; }

モーダルをページ内容より手前へ出す

モーダルと背景のオーバーレイを同じ重ね合わせの設計に置き、ページ内容より手前へ表示します。

.modal { position: fixed; inset: 0; z-index: 100; }

ポイント

大きな数でも、別の重ね合わせを飛び越えない。

z-indexは同じ重ね合わせコンテキストの中で比較されます。子要素へ9999を指定しても、親が奥側の重ね合わせコンテキストにいる場合は、手前側にある別の親要素を飛び越えられません。positionがstaticではない要素に使えるほか、FlexboxやGridの項目ならpositionを変えなくても使えます。整数値を指定した要素は新しい重ね合わせコンテキストを作り、このプロパティは子要素へ継承されません。