HTMLとCSSで要素を重ねる際、z-indexプロパティを使います。通常は数値が大きい要素ほど前面に表示されます。しかし、複数の要素が同じz-indexを持つ場合、どちらが前面に表示されるかは少し複雑です。
同じz-indexの要素の重なり順の決まり方
同じスタッキングコンテキスト内で、z-indexが同じ要素はHTMLソースコード上の後にある要素が前面に表示されます。つまり、DOMツリーの後ろに書かれた要素ほど上に表示されることになります。
例えば、以下のHTMLではdiv2がdiv1より後に書かれているので、div2が前面に表示されます。
<div class="box" style="z-index:1;">Box 1</div>
<div class="box" style="z-index:1;">Box 2</div>スタッキングコンテキストに注意
z-indexの重なりはスタッキングコンテキスト単位で決まります。positionプロパティやopacity、transformなどで新しいスタッキングコンテキストが作られると、子要素同士のz-indexの比較はその中だけで行われます。別のスタッキングコンテキストの要素とは直接比較されません。
まとめ
同じz-indexの要素は、HTMLソース上の後にあるものが前面に表示されるというルールに従います。ただし、スタッキングコンテキストの影響を受けるため、positionやtransformなどで新しいコンテキストが作られる場合はその中での順序が優先されます。重なり順を正確に制御したい場合は、z-indexの値やスタッキングコンテキストの作り方を意識しましょう。
コメント