重ね合わせコンテキスト

概要

要素を重ねる時に順番の仕組みのことを重ね合わせコンテキスト

Positionを使用することで、z-index が使用できるが、DOMの位置によってz-inex通りに重ならないことがある

例えば、z-indexをネストしてスタイリングした場合、親の要素に内包された（スタックされるという）子の要素ができあがる

code:html

<div class="ts">TypeScript</div>

</div>

<div class="js">JavaScript</div>

</div>

code:css

.wrapper {

position: relative;

}

.wrapper-ts {

z-index: 1;

}

.ts {

position: absolute;

z-index: 530000;

background-color: #2b7489;

padding: 16px;

}

.js {

position: absolute;

z-index: 5;

background-color: #f1e05a;

padding: 16px;

}

上記の場合、JavaScriptの上にTypeScriptが表示されそうだが、TypeScriptの要素はwrapper-tsクラスがtsクラスを内包しているので、z-indexが1扱いになる。よって、TypeScriptのうえにJavaScriptが表示されるようになる

重ね合わせコンテキストが起きるには特定の条件があり、以下のスタイルを使用したときに発生する

・positionの値がabsoluteあるいはrelativeで、かつz-indexの値がauto以外

・position の値が fixed あるいは sticky

・display: flexあるいはdisplay: gridの子要素で、かつz-indexの値がauto以外

・opacityの値が1以外

・mix-blend-modeの値がnormal以外

・transform、filter、perspective、clip-path、mask、mask-image、mask-borderの値がnone以外

・isolationの値がisolateの場合

・will-changeの値がauto以外で上記のようなプロパティを指定している場合

同一のスタックされた要素の場合は、以下の順番で表示順が決まる

1. z-indexの値

2. 要素の出現順

ポイントはz-indexをグローバルな値として使用せず、作業範囲を適切にし限定的に使用することで、意図しない挙動をすることをさけることができる

参考