重なりの順序を指定するz-indexについて [CSS] | IT SKILL MAP STUDY -- WEBプログラミング知識【実務的なHTML,CSS,JavaScript,JQuery,PHPの知識】

重なりの順序を指定するz-indexについて

　z-indexとは重なりの表示順序を指定するものです。前提条件としてpositionをrelative、absolute、fiexedに指定している要素のみz-indexを利用できます。
　つまりpositionの初期値staticではz-indexを利用できないので、明示的にpositionをrelative、absolute、fiexedのいずれかにする必要があります。
　非常にposisionプロパティと関連度が高いのでpositionのページをご確認下さい。
　また、z-indexは重なる要素に透明度を指定するrgba()と併せてよく利用されます。

z-indexのプロパティ

z-index値	説明
Auto（初期値）	この場合、後に書かれた要素が上（前面）に表示されます。
整数	整数の値が大きいほど上（前面）に表示されます。例えばz-index:10;とz-index:20;を指定した要素の場合、z-index:20;の方が上になります。

z-indexの利用例

結果
HTML
CSS

親要素
子要素(前)
z-index:20;

子要素(後)
z-index:10;

/* HTMLの例 */
	親要素
		子要素(前)
z-index:20;
		子要素(後)
z-index:10;

/* CSSの例 */

.parent1_1 {
	position:relative;
	height:100px;
	margin:5px;
	padding:5px;
	background:aliceblue;
	border:1px solid lightgray;
	text-align:center;
}

.child1_1 {
	display:inline-block;
	position:relative;
	z-index:20;
	width:100px;
	height:70px;
	margin:5px;
	padding:5px;
	background: orange;
	left:15px;
}

.child1_2 {
	display:inline-block;
	position:relative;
	z-index:10;
	width:100px;
	height:70px;
	margin:5px;
	padding:5px;
	width:100px;
	height:70px;
	background: skyblue;
	top:10px;
	left:-15px;
}

　z-indexの大きい子要素が前に表示されます。

rgba()を利用して透明度も設定

結果
HTML
CSS

親要素
子要素(前)
z-index:20;

子要素(後)
z-index:10;

/* HTMLの例 */
	親要素
		子要素(前)
z-index:20;
		子要素(後)
z-index:10;

/* CSSの例 */

.parent2_1 {
	position:relative;
	height:100px;
	margin:5px;
	padding:5px;
	background:aliceblue;
	border:1px solid lightgray;
	text-align:center;
}

.child2_1 {
	display:inline-block;
	position:relative;
	z-index:20;
	width:100px;
	height:70px;
	margin:5px;
	padding:5px;
	background: rgba(247,151,34,.5);
	left:15px;
}

.child2_2 {
	display:inline-block;
	position:relative;
	z-index:10;
	width:100px;
	height:70px;
	margin:5px;
	padding:5px;
	width:100px;
	height:70px;
	background: rgba(47,185,226,.5);
	top:10px;
	left:-15px;
}

親要素を子要素より前にする方法

失敗例

結果
HTML
CSS

親要素(一番前にしたい)z-index:30;
子要素(前)
z-index:20;

子要素(後)
z-index:10;

/* HTMLの例 */
	親要素(一番前にしたい)z-index:30;
		子要素(前)
z-index:20;
		子要素(後)
z-index:10;

/* CSSの例 */

.parent3_1 {
	position:relative;
	z-index:30;
	height:100px;
	margin:5px;
	padding:5px;
	background: rgba(234,245,247,.5);
	border:1px solid lightgray;
	text-align:center;
}

.child3_1 {
	display:inline-block;
	position:relative;
	z-index:20;
	width:100px;
	height:70px;
	margin:5px;
	padding:5px;
	background: orange;
	left:15px;
}

.child3_2 {
	display:inline-block;
	position:relative;
	z-index:10;
	width:100px;
	height:70px;
	margin:5px;
	padding:5px;
	width:100px;
	height:70px;
	background: skyblue;
	top:10px;
	left:-15px;
}

　親要素に子要素より大きいz-indexを指定していますが前に表示されません。

成功例

結果
HTML
CSS

親要素(一番前にしたい)
子要素(前)
z-index:-10;

子要素(後)
z-index:-20;

/* HTMLの例 */
	親要素(一番前にしたい)
		子要素(前)
z-index:-10;
		子要素(後)
z-index:-20;

/* CSSの例 */

.parent4_1 {
	position:relative;
	height:100px;
	margin:5px;
	padding:5px;
	background: rgba(234,245,247,.5);
	border:1px solid lightgray;
	text-align:center;
}

.child4_1 {
	display:inline-block;
	position:relative;
	z-index:-10;
	width:100px;
	height:70px;
	margin:5px;
	padding:5px;
	background: orange;
	left:15px;
}

.child4_2 {
	display:inline-block;
	position:relative;
	z-index:-20;
	width:100px;
	height:70px;
	margin:5px;
	padding:5px;
	width:100px;
	height:70px;
	background: skyblue;
	top:10px;
	left:-15px;
}

　親要素にz-indexを指定しない。子要素のz-indexにマイナス値を設定する。以上の条件を満たすと親要素を子要素の前にすることが出来ます。
　ただし、透明度は反映できません。このため子要素を隠したい時に使える程度でしょうか。