CSS

The z-index property is a CSS property used to control the vertical stacking order of elements.

z-index プロパティ

　z-indexプロパティは、要素のスタッキングコンテキスト内での優先順位（重なり）を調整するために使用されるプロパティです。スタッキングコンテキストとは、親要素とその子要素から成る一連の層を指します。このスタッキングコンテキストにおいて、z-index値が大きい要素ほど上に表示されます。

　z-indexプロパティは、整数値、auto、または inherit のいずれかを指定できます。整数値が指定された場合、値が大きいほど要素は上に表示されます。autoが指定された場合、要素はスタッキングコンテキスト内で通常の優先順位を持ちます。inheritが指定された場合、親要素の z-index値を継承します。

　z-indexプロパティは、通常、要素の positionプロパティが relative、absolute、fixedの場合に使用されます。staticを持つ要素に z-indexプロパティを指定しても、スタッキングコンテキストを作成できないため、効果がありません。

　z-indexプロパティは、親要素の z-index値によって制限されます。つまり、親要素のスタッキングコンテキスト内で要素を上に表示することはできません。ただし、positionプロパティが設定された要素は、その親要素に依存せず、body要素を基準としてスタッキングコンテキストを形成します。

　最後に、z-indexプロパティを使用すると、要素の順序が異なるスタッキングコンテキストを作成することができます。これは、要素の表示順序を細かく制御するために必要な場合があります。

　例えば、以下のような HTMLコードがある場合、要素の表示順序を制御するために z-indexプロパティを使用することができます。

<div class="parent">
	<div class="child child1"></div>
	<div class="child child2"></div>
</div>

.parent {
	position: relative;
	z-index: 1;
}
	
.child1 {
	position: absolute;
	z-index: 2;
}
	
.child2 {
	position: absolute;
	z-index: 3;
}

　上記の例では、親要素のスタッキングコンテキストに対して z-index: 1; が設定されています。そして、子要素の一方の要素には z-index: 2; が、もう一方の要素には z-index: 3; が設定されています。このようにすることで、要素の順序を制御することができます。child2の z-indexが child1よりも高いため、child2は child1の上に表示されます。さらに、parent要素の z-indexが 1 であるため、これらの子要素は他の親要素内の要素よりも前面に表示されます。

　重要なことは、z-index値が大きいからといって、必ずしも要素が画面上に表示されるわけではないことです。親要素や兄弟要素によって、重なり順が変わってしまうことがあります。その場合は、要素の positionプロパティを変更することで、スタッキングコンテキストを別に作成することが必要になるかもしれません。

　最後に、z-indexプロパティは、視覚的な表現を制御するための重要なプロパティです。しかし、過度に使用すると、スタッキングコンテキストが複雑になり、パフォーマンス上の問題が発生する可能性があるため、使用には注意が必要です。

値

auto【初期値】

親要素と同じ重ね合わせレベルの階層になります。

整数値で指定

重なりの順序を整数で指定します。0を基準として、値が大きいものほど上になります。

Sample

　まず、基本となる要素を準備します。

<div class="parent">
	<p class="c1">z-index:auto;</p>
	<p class="c2">z-index:auto;</p>
	<p class="c3">z-index:auto;</p>
</div>

.parent {
	position: relative;
	height: 160px;
}
.parent p.c1, p.c2, p.c3 {
	display: inline-block;
	position: absolute;
	padding: 0.5em;
	white-space: nowrap;
}
.c1 {
	background-color: #cc0000;
	left: 10px;
	top: 10px;
}
.c2 {
	background-color: #00bb00;
	left: 20px;
	top: 40px;
}
.c3 {
	background-color: #0188ff;
	left: 30px;
	top: 70px;
}	

　これの CSSに z-indexプロパティを追加して要素の重なり順を逆にしてみます。

.parent {
	position: relative;
	height: 160px;
}
.parent p.c1, p.c2, p.c3 {
	display: inline-block;
	position: absolute;
	padding: 0.5em;
	white-space: nowrap;
}
.c1 {
	background-color: #cc0000;
	left: 10px;
	top: 10px;
	z-index: 3;
}
.c2 {
	background-color: #00bb00;
	left: 20px;
	top: 40px;
	z-index: 2;
}
.c3 {
	background-color: #0188ff;
	left: 30px;
	top: 70px;
	z-index: 1;
}