【CSS】z-indexで要素の重なり順を制御する

CSSのz-indexプロパティは、ウェブページ上で要素の重なり順序を制御するのに非常に有効です。このプロパティを適切に使用することで、デザインの柔軟性が大幅に向上し、さまざまなビジュアル効果を実現することができます。しかし、z-indexの使い方を誤ると、予期しない表示結果になることがあります。本記事では、z-indexの基本的な使い方と、一般的なエラーへの対処法を、初心者にも分かりやすく説明します。

z-indexの基本

z-indexプロパティは、要素の重なる順序を指定します。
これは、要素が他の要素の前面または背面に表示されるかを決定する数値です。z-indexは、position: relative;、position: absolute;、position: fixed;、またはposition: sticky;に設定されている要素にのみ適用できます。

• 基本的なルール
  z-indexの値が大きいほど、要素は他の要素の上に表示されます。値が小さいほど、要素は下に表示されます。デフォルトのz-index値はautoで、要素はHTMLの構造に従って重なります。

z-indexの使い方

要素に位置付けを設定する

z-indexを使用する前に、要素にposition: relative;、position: absolute;、position: fixed;、またはposition: sticky;のいずれかを設定します。

.element {
    position: relative;
}

z-indexを適用する

要素にz-indexプロパティを追加し、数値を指定します。例えば、z-index: 5;と設定すると、z-indexが指定されていない要素や、z-indexの値が5未満の要素よりも上に表示されます。

.element {
    position: relative;
    z-index: 5;
}

階層構造を考慮する

要素が子要素である場合、親要素のz-indexが内側の要素の重なり順に影響を与えます。外側の要素のz-indexが低いと、内側の要素がどれだけ高いz-indexを持っていても、外側の要素より上には表示されません。

<div class="element_wrap">
    <div class="element_box">
        <div class="element">
            <p>テキスト</p>
        </div>
    </div>
</div>
<div class="element_wrap_2">
    <div class="element_box_2">
        <div class="element_2">
            <p>テキスト</p>
        </div>
    </div>
</div>

.element_wrap {
    position: relative;
    z-index: -5;
}
.element {
    position: relative;
    z-index: 100;
}

.element_wrap_2 {
    position: relative;
    z-index: 100;
}

上記例では、.elementはz-index: 100;を持っていますが、親要素である.element_wrapはz-index: -5;しかないので、重なり順で言えば.element_wrap_2の方が上に来ている状態です。

考えられる使用シーン

1. ヘッダーを常に前面に表示する
   ページのスクロールに関係なくヘッダーが常に前面に表示されるようにするには、ヘッダーにposition: fixed;またはposition: sticky;とz-indexを高い値で設定します。

   .header {
       position: fixed;
       top: 0;
       width: 100%;
       z-index: 1000; /* 高い値を設定して他の要素よりも前面に */
   }

2. 擬似要素を背面に表示する
   擬似要素のz-indexを下げることで、画像の後ろに同じサイズのシャドウが落ちているようなデザインを作ることができます。

   .image_box {
       position: relative;
   }
   .image_box::before {
       position: absolute;
       content: "";
       top: 15px;
       left: 15px;
       width: 100%;
       height: 100%;
       background: coral;
       z-index: -10;
   }
   

よくあるエラーと注意点

z-indexが効かない

z-indexはpositionプロパティがstatic以外の要素にのみ適用できます。エラーの対処法として、要素にposition: relative;、position: absolute;、position: fixed;、またはposition: sticky;のいずれかを設定してください。

求めてる重なり順序にならない

要素が別の要素にネストされている場合、外側の要素のz-indexが内側の要素に影響します。すべての要素でz-indexを適切に設定し、必要に応じて親要素のz-indexも調整してください。

ページ全体で一貫性のあるz-indexの管理

ページ全体である程度一貫性のあるz-index戦略を持つことが重要です。大きな数値をランダムに使用するのではなく、必要な重なり順を維持するために、z-index値を段階的に設定することをお勧めします。

まとめ

z-indexプロパティは強力なツールですが、正しく使用するには理解と注意が必要です。上記のガイドラインに従い、位置付けが適用された要素に対して適切にz-indexを設定することで、より魅力的で機能的なウェブデザインを実現できます。また、エラーが発生した場合は、この記事で紹介したよくあるエラーの対処法や下記サイトを参照してみてください。
MDN Web Docs（CSS：カスケーディングスタイルシート z-index）