問題
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を設定して同じ体裁となるように調整する必要がありますので、十分お気を付けください。
コメント