異なる親要素を持つ子要素の重なりを、positionプロパティとz-indexプロパティを指定して確認します。
デモページはこちら
以下のhtml構造で確認します。
最初のクラス名div-parentのdivタグにオレンジ、クラス名div-childのdivタグに青、次のdiv-parentに緑、div-childに紫の背景色をつけます。
<div class="div-parent">
<div class="div-child"></div>
</div>
<div class="div-parent">
<div class="div-child"></div>
</div>CSSでposition、z-indexの指定がない場合、htmlの記述が後の要素が上に重なります。
青のみposition: relative、z-index: 10を指定すると、青が一番上に重なります。次に、紫にposition: relative、z-index: 20を指定すると、青のさらに上に紫が重なります。
問題は次です。今までは子要素のみへの指定でしたが、ここで紫の親要素である緑にposition: relative、、z-index: 5を指定します。
すると、z-index: 20の紫の上にz-index: 10の青が重なります。これは緑にz-indexを指定したことで紫は親要素の緑に内包され、z-index: 10の青とz-index: 5の緑の比較になっているのが原因です。これで紫にどんなに大きなz-indexを指定しても青より上になることはありません。
このように、親要素にz-indexを指定すると子要素の重なりに影響を及ぼす場合があるため、指定には注意が必要です。
