z-indexプロパティ

z-indexプロパティは、複数の要素が互いに重なり合う場合に、どの要素が前面に表示されるかを設定します。

構文

セレクター {
	z-index: 数値 | auto;
}

数値は整数で、正の値または負の値である必要があります。ゼロも指定可能です。

値

値	説明
数値	整数で要素の重なり順を指定します: 要素が重なり合う場合、`z-index`の値がより大きい要素が前面に表示されます。
`auto`	重なり順は自動的に構築されます: HTMLコード内で後に記述された要素が前面に表示されます。

デフォルト値: auto。

例

この例では、ブロックはHTMLコード内での順序に従って互いに重なり合います（z-indexは指定されておらず、デフォルト値のautoとなります）。最初のブロックが最背面（赤）、最後のブロックが最前面（緑）になります:

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

#div1 {
	position: absolute;
	top: 30px;
	left: 30px;
	width: 50px;
	height: 50px;
	background: red;
}
#div2 {
	position: absolute;
	top: 60px;
	left: 60px;
	width: 50px;
	height: 50px;
	background: blue;
}
#div3 {
	position: absolute;
	top: 90px;
	left: 90px;
	width: 50px;
	height: 50px;
	background: green;
}

例

z-indexを指定して重なり順を変更します。赤いブロックに3、青いブロックに2、緑のブロックに1を設定します。重なり順は逆転し（z-indexが3のブロックが最前面になります）:

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

#div1 {
	position: absolute;
	top: 30px;
	left: 30px;
	width: 50px;
	height: 50px;
	background: red;
	z-index: 3;
}
#div2 {
	position: absolute;
	top: 60px;
	left: 60px;
	width: 50px;
	height: 50px;
	background: blue;
	z-index: 2;
}
#div3 {
	position: absolute;
	top: 90px;
	left: 90px;
	width: 50px;
	height: 50px;
	background: green;
	z-index: 1;
}