問題 × 解決策

z-indexは親、先祖要素に依存してしまう

問題

z-indexが上手く機能しない。

解決策

親または先祖要素にz-indexを設定している場合、そのz-indexの値が優先されてしまっている。

 

親を含めた先祖要素へのz-indexの値の依存

まず、下記をご覧ください。

先頭に配置したいテキスト

本来は、「先頭に配置したいテキスト」を一番上に配置したいのですが、濃いオレンジ色の丸いブロックが先頭に来てしまっています。

HTMLはこちらです。

<div class="posi-box section-ss">
	<div class="posi01">
		<p class="text">先頭に配置したいテキスト</p>
	</div>
	<div class="posi02"></div>
</div>

CSSはこちらです。

.posi-box{
	height: 300px;
	padding: 10px;
	position: relative;
	border: 1px solid #40180A;
}
.posi-box .posi01{
	width: 200px;
	height: 200px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	background-color: #FCECE8;
	z-index: 0;
}
.posi-box .posi01 .text{
	width: 100%;
	height: 100px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	font-weight: bold;
	z-index: 2;
}
.posi-box .posi02{
	width: 150px;
	height: 150px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	background-color: rgba(241,90,36,0.5);
	border-radius: 50%;
	z-index: 1;
}

この現象の要因

親要素であるクラス「posi01」に「z-index: 0;」が設定されており、そちらが優先されてしまっているため。

先頭に配置したかったクラス「text」に設定された「z-index: 2;」は、親要素であるクラス「posi01」の「z-index: 0;」が優先されてしまうため、濃いオレンジ色の丸いブロックであるクラス「posi02」の「z-index: 1;」の後ろに回り込んでしまいました。

該当箇所
.posi-box .posi01{
	...
	z-index: 0;
}
.posi-box .posi01 .text{
	...
	z-index: 2;
}
.posi-box .posi02{
	...
	z-index: 1;
}

ここに注意!

親または先祖要素にz-indexを設定していると、子要素でいくらz-indexを設定しても、親・先祖要素のz-indexの設定が優先されてしまいます

なので、HTMLを見直すか、CSSを工夫して、兄弟要素にz-indexを設定して同じ体裁となるように調整する必要がありますので、十分お気を付けください。

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

9 + sixteen =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧