# z-index

> 要素の重ね順（奥行き順）を指定するプロパティです。値が大きいほど手前に表示されます。position: static以外の要素に適用され、モーダルやドロップダウンメニューなどの実装に不可欠です。

- カテゴリ: レイアウト・配置
- URL: https://www.css-dictionary.com/property/z-index/

## 構文

```css
z-index: auto | <integer>
```

## Tailwindでは

- `z-10` → z-index: 10
- `z-50` → z-index: 50
- `z-auto` → z-index: auto
- `-z-10` → z-index: -10
- 一般形: `z-{n}`
- 任意値: `z-[999]`

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 1+ / Firefox 1+ / Safari 1+ / Edge 12+

## コード例

### 例1: 通常レイヤー（1段上）

```css
z-index: 1;
```

### 例2: 上位レイヤー（10段上）

```css
z-index: 10;
```

## TIPS

positionがstaticでない要素にのみ有効。モーダルやドロップダウンでよく使用。

## よくある間違い

positionを指定していない要素にz-indexを指定しても効果がない。

## AIがよく間違えるポイント

AIは重なり問題に対して安易にz-index: 9999を出しがちですが、スタッキングコンテキストが違えば数値をいくら上げても勝てません。transformやopacity、filterが新しいスタッキングコンテキストを作る点はAIも人間も見落とす定番ポイントです。

## AIへの依頼文例

- z-indexを上げてもモーダルがヘッダーの下に隠れる。スタッキングコンテキストの観点で原因を特定して
- このプロジェクトのz-index値をトークン化（変数で段階管理）して整理して

## 関連プロパティ

- [position](https://www.css-dictionary.com/property/position.md)