z-index:位置指定された要素の重なり順を指定する

初期値 auto
適用対象 位置指定された要素
継承 しない
アニメーション <integer>値
対応ブラウザ caniuseで確認

z-indexプロパティの説明

z-indexは、位置指定された要素の重なり順を指定します。通常、要素が重なった時に画面の手前に表示されるのは、HTMLのソースコード上で後に書かれたものです。

この機能を有効にするには、まず対象となる要素が位置指定を受け入れる状態になっていなければなりません。そのため、positionプロパティでstatic以外の値を指定します。そうすると、要素は通常のレイアウトのフローから外れて位置指定の対象となります。

z-indexは、要素のスタッキング・コンテキスト(重ね合わせ)を操作します。これは画面の奥行きを表すZ軸の位置を操作するという意味です。指定された数値が小さいほど奥へ、大きいほど手前に表示されます。ここで言う数値のことをスタックレベル(stack level)と言います。

位置指定された要素を制御するには以下のプロパティを使用します。

  • 上辺からの距離:top
  • 右辺からの距離:right
  • 下辺からの距離:bottom
  • 左辺からの距離:left
  • 重なり合う順序:z-index

z-indexに指定できる値

auto
既定値に従います。要素は親要素のスタッキング・コンテキストを引き継ぎます。
<integer>
新しいスタッキング・コンテキストを作成します。要素は与えられた数値で大きいものほど手前に重なります。これに含まれる子要素は、外部のスタッキング・コンテキストの影響を受けません。

z-indexの使い方とサンプル

z-indexプロパティの構文は以下の通りです。

CSS
/* キーワード値 */
z-index: auto;

/* <integer>値 */
z-index: 0;
z-index: 3;
z-index: 999;
z-index: -3;
z-index: -999;

/* グローバル値 */
z-index: inherit;
z-index: initial;
z-index: revert;
z-index: unset;

z-indexの実例

それでは実際にz-indexプロパティの書き方を見ていきましょう。以下の例は、位置指定された要素の重なり順を変えた時にどのように表示されるのか、動的に確認できる内容です。色のついたブロックは既定値で配置されています。サンプルのスイッチを押して、z-indexの値を変えてみましょう。

表示確認
CSS
.samp_box {
	position: relative;
	width: 100%;
	height: 220px;
	padding: 0 1rem 1rem;
	background-color: #eee;
	overflow: auto;
}
.samp_box > p {
	position: relative;
	padding: .5rem;
	border: 1px solid #333;
	background-color: #fff;
	text-align: center;
}
.samp_box > p:nth-of-type(1) {
	top: 30px;
	z-index: 3;
}
.samp_box > p:nth-of-type(2) {
	top: 60px;
	z-index: 5;
}
.samp_box > div {
	position: absolute;
	left: 50%;
	width: 100px;
	height: 200px;
	padding: .5rem;
	border: 1px solid #999;
}
#item_1 {
	top: 10px;
	margin-left: -170px;
	background-color: #fcc;
}
#item_2 {
	top: 10px;
	margin-left: -50px;
	background-color: #ccf;
}
#item_3 {
	top: 10px;
	margin-left: 70px;
	background-color: #cfc;
}
.control {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 1rem;
	text-align: center;
}
.control > label {
	display: block;
	padding: .3rem .5rem;
	border: 1px solid #ccc;
	background-color: #09f;
	color: #fff;
	text-align: center;
	cursor: pointer;
}
input[type="radio"] {
	display: none;
}
#zi_3:checked ~ #item_1 {
	z-index: 3;
}
#zi_4:checked ~ #item_2 {
	z-index: 4;
}
#zi_5:checked ~ #item_3 {
	z-index: 5;
}
HTML
<section class="samp_box">
	<!--=== 切り替えスイッチ用 ===-->
	<input type="radio" name="s" id="zi_3">
	<input type="radio" name="s" id="zi_4">
	<input type="radio" name="s" id="zi_5">
	<!--/=== 切り替えスイッチ用 ===-->
	<p>z-index: 3;</p>
	<p>z-index: 5;</p>
	<div id="item_1">item_1</div>
	<div id="item_2">item_2</div>
	<div id="item_3">item_3</div>
</section>
<cection class="control">
	<label for="zi_3">z-index: 3;</label>
	<label for="zi_4">z-index: 4;</label>
	<label for="zi_5">z-index: 5;</label>
</cection>

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

要素の表示や配置方法
bottom 位置指定で配置された要素の底辺からの距離を指定する
break-after ボックスの終了時にページやカラムをどのように区切るかを指定する
break-before ボックスの開始前にページやカラムをどのように区切るかを指定する
break-inside ボックスの途中でページやカラムをどのように区切るかを指定する
clear フロート(float)の回り込みを解除する
clip 要素を切り抜いて可視化する範囲を指定する
box-decoration-break 要素の断片が複数の行やページに渡る場合に装飾の表示の仕方を指定する
display 要素の表示形式を指定する
float 要素を右または左へ寄せて配置する
image-orientation 横向きや逆さまに撮影された写真を正しい向きに回転させる
image-rendering 画像を拡大縮小するアルゴリズムを設定する
left 位置指定で配置された要素の左辺からの距離を指定する
object-fit 画像や動画などの置換要素をボックスに収める方法を指定する
object-position ボックスの中に配置されるオブジェクトの位置を指定する
overflow 要素からはみ出した内容の表示方法をまとめて指定する
overflow-wrap インライン要素に対して溢れる単語の折り返し方法を指定する
overflow-x 要素から水平方向にはみ出す内容の表示方法を指定する
overflow-y 要素から垂直方向にはみ出す内容の表示方法を指定する
position 要素の位置指定の種類を変更する
right 位置指定で配置された要素の右辺からの距離を指定する
vertical-align インライン要素や表のセルに対して縦方向の揃える位置を指定する
visibility 要素の領域を残したまま表示・非表示を切り替える
z-index 要素の重なり順序を指定する