CSSのz-indexが同じ場合、どちらが上に表示されるかについて

CSSで要素を重ね合わせる際、z-indexプロパティを使って重なり順を指定します。しかし、同じz-index値を持つ要素がある場合、どちらが上に表示されるかが気になることがあります。この記事では、z-indexが同じ要素の重ね順がどう決まるかについて解説します。

1. z-indexとは？

まず、z-indexプロパティは、要素が画面上でどの位置に表示されるか、つまり前面か背面かを指定するために使用します。z-indexは数値で指定し、数値が大きいほど前面に表示されます。

一般的に、z-indexを指定することで要素の重なり順を制御できますが、z-indexが同じ場合、ブラウザは別の方法で重なり順を決定します。

2. z-indexが同じ場合、どう決まるのか

z-indexが同じ場合、要素の重なり順は、HTML文書における要素の並び順によって決まります。具体的には、後に記述されたHTML要素が前面に表示されます。

例えば、以下のようなHTMLがあるとします。

<div class="box1" style="z-index: 10;">Box 1</div>
<div class="box2" style="z-index: 10;">Box 2</div>

この場合、Box 1とBox 2のz-indexは同じですが、HTMLコード内ではBox 1が先に記述されています。そのため、Box 2がBox 1の上に表示されることになります。

3. 具体例と実際の挙動

以下のコードで試してみましょう。Box 1が先に記述され、両方のボックスには同じz-indexが指定されています。

<div class="box1" style="position: absolute; z-index: 10; width: 100px; height: 100px; background-color: red;">Box 1</div>
<div class="box2" style="position: absolute; z-index: 10; width: 100px; height: 100px; background-color: blue;">Box 2</div>

Box 1は赤、Box 2は青で表示されますが、Box 2が上に表示されます。これは、HTMLコード内でBox 2がBox 1より後に記述されているためです。

4. 解決策と考慮点

z-indexが同じ場合、重なり順を意図的に変更したい場合は、z-indexを適切に調整するか、HTMLでの並び順を変更する必要があります。必要に応じて、z-indexを個別に設定し、要素を前面や背面に適切に配置することが重要です。

また、要素が重なり順で問題を抱えている場合は、positionプロパティ（relative, absolute, fixedなど）を正しく設定することも大切です。

まとめ

z-indexが同じ場合、HTML文書で後に記述された要素が前面に表示されます。重なり順を変更するには、z-indexの数値を変更するか、HTMLの並び順を調整することが必要です。適切にz-indexを使用し、意図した通りの表示を行いましょう。