要素の重ね順(奥行き順)を指定するプロパティです。値が大きいほど手前に表示されます。position: static以外の要素に適用され、モーダルやドロップダウンメニューなどの実装に不可欠です。
z-index: auto | <integer>| z-10 | z-index: 10 |
| z-50 | z-index: 50 |
| z-auto | z-index: auto |
| -z-10 | z-index: -10 |
一般形: z-{n}
任意値: z-[999]
z-index: 1;通常レイヤー(1段上)
z-index: 10;上位レイヤー(10段上)
positionがstaticでない要素にのみ有効。モーダルやドロップダウンでよく使用。
positionを指定していない要素にz-indexを指定しても効果がない。
AIは重なり問題に対して安易にz-index: 9999を出しがちですが、スタッキングコンテキストが違えば数値をいくら上げても勝てません。transformやopacity、filterが新しいスタッキングコンテキストを作る点はAIも人間も見落とす定番ポイントです。
z-indexを上げてもモーダルがヘッダーの下に隠れる。スタッキングコンテキストの観点で原因を特定して
このプロジェクトのz-index値をトークン化(変数で段階管理)して整理して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。