【CSS Modules】z-indexプロパティの使い方

z-indexプロパティは、ウェブページ上で複数の要素が重なり合う際に、どの要素が手前に表示され、どの要素が奥に表示されるかの順序を決定するために使用されるプロパティです。このプロパティは、positionプロパティがstatic以外の値（例: relative, absolute, fixed, sticky）に設定された要素に対してのみ効果を発揮します。

z-indexには主に二つの種類の値を指定できます。一つはautoで、これは要素に特定の重なり順序を指定せず、親要素と同じスタッキングコンテキスト内で他の兄弟要素と同じレベルで扱われることを意味します。もう一つは整数値で、正の数、負の数、そして0を指定することが可能です。この整数値が大きいほど、その要素は他の要素よりも手前に表示されます。逆に、値が小さいほど奥に表示され、負の値を指定すると、通常のドキュメントフローで表示される要素よりもさらに背景側に要素を配置することもできます。

z-indexが機能するためには、「スタッキングコンテキスト」という概念の理解が重要です。スタッキングコンテキストは、要素が積み重なるための特定の層のようなもので、z-indexの値は同じスタッキングコンテキスト内でのみ比較され、重なり順序が決定されます。新しいスタッキングコンテキストは、positionがstatic以外の値に設定され、かつz-indexがauto以外の値に設定された要素などによって作成されます。子要素のz-indexは、その親要素が持つスタッキングコンテキストの範囲内で効果を発揮するため、親要素のz-indexが低ければ、子要素がいくら高いz-indexを持っていても親要素よりも手前に表示されることはありません。このプロパティを適切に使用することで、複雑なレイアウトにおいて要素の視覚的な階層を正確に制御することが可能になります。

Copy
1.element {
2  z-index: 1;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません