Question 1

CSS z-indexとは何ですか？

Accepted Answer

CSS z-indexはポジション指定された要素の垂直スタック順序を制御します。z-indexが高い要素は重なった場合、低い要素の前に表示されます。

Question 2

なぜz-indexが機能しないのですか？

Accepted Answer

z-indexはポジション指定された要素（position: relative、absolute、fixed、sticky）にのみ機能します。position: staticの要素はz-indexプロパティを無視します。

Question 3

スタッキングコンテキストとは何ですか？

Accepted Answer

スタッキングコンテキストは独自のスタッキングレイヤーを作成する要素です。opacity < 1、transform、filterなどのプロパティは新しいスタッキングコンテキストを作成します。

Question 4

UIでよく使われるz-indexの値は何ですか？

Accepted Answer

一般的な値：基本コンテンツは0、カードとドロップダウンは10-100、モーダルとオーバーレイは1000、ツールチップと通知は9999です。

Question 5

9999999のような非常に高いz-index値を使うべきですか？

Accepted Answer

いいえ。任意に高い値を使うと保守が難しくなります。デザインシステムでz-indexスケール（例：10、100、200、500、1000）を定義し、一貫して使用してください。

Z-Index マネージャー

レイヤーリスト