Blog スタッフブログ

WEB制作

z-indexを活用してコンテンツの前後関係を正しく設定する

WEB制作の山田です。

複数のコンテンツを重ねて配置する際、要素の重なり順をコントロールできるcssプロパティのz-indexはとても便利です。z-indexのあとに数字を指定すれば、その数字順に各要素が重なって表示されます。

ただし、想定通りにz-indexを機能させるにあたってはいくつかルールが存在します。

①z-indexを指定するすべての要素にpositionを指定する

そもそもz-indexは単体では機能せず、関連する各要素にpositionを指定する必要があります。

この際、position:staticを指定すると効果が無いので、relativeやabsoluteなどそれ以外のpositionを指定しましょう。

②親要素のz-indexの数値を考慮したうえで各要素のz-indexを指定する

z-indexを正しく設定しているにもかかわらず各要素が順番通りに表示されない、という場合に一番ありがちなミスです。

positionとz-indexを組み合わせたものをスタックコンテキストと呼ぶのですが、子要素のスタックコンテキストは親要素より上に来ることはありません。

<div class="kasou_content">
<div class="main-content">
	<div class="container">
		<div class="text_content">
	<div class="square1">
		
	</div>
	
		</div>
		<div class="square2">
			
		</div>
	</div>
</div>
</div>


.kasou_content{
	padding-top: 100px;
	padding-bottom: 100px;
	background-color: #ccc;
}
.main-content{
	position: relative;
	z-index: 2;
}
.text_content{
	background-color: #fff;
	position: relative;
width: 100%;
max-width: 506px;
padding: 80px;
z-index: 0;
}

.square1{
	position: absolute;
	display: block;
	bottom: 0;
	left: 30px;
	width: 200px;
	height: 100px;
	z-index: 4;
	opacity:1;
	background-color: #4bcbe2;
}

.square2{
	position: absolute;
	display: block;
z-index: 3;
	bottom: 0;
	left: 200px;
	width: 100px;
	height: 200px;
	opacity: 0.7;
	background-color: #f5919e;
}

上記のコードではsquare1、square2というdivが重なって表示されています。

このうちsquare2にはz-index3が、square1にはz-index4が指定されているので一見数値の大きいsquare1がsquare2より手前に配置されるように思えますが、実際にはsquare1の親要素であるtext_contentのz-indexが0と指定されているため、その子要素であるsquare1はtext_contentの外側に配置されているsquare2より手前に来ることはありません。

複数の要素をz-indexを用いて重ねて表示する際は、こうしたz-indexの細かい仕様に目を向けることが重要となります。

戻る一覧へ戻る