# position

> 要素の配置方法を指定するプロパティです。通常の文書フローからの配置制御が可能です。top、right、bottom、leftプロパティと組み合わせて使用します。

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

## 構文

```css
position: static | relative | absolute | fixed | sticky
```

## Tailwindでは

- `static` → position: static
- `relative` → position: relative
- `absolute` → position: absolute
- `fixed` → position: fixed
- `sticky` → position: sticky

## ブラウザ対応

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

## コード例

### 例1: 通常位置から上に10px、左に20px移動した相対配置

```css
.relative-box {
  position: relative;
  top: 10px;
  left: 20px;
}
```

### 例2: 親要素の右上角に配置される絶対配置

```css
.absolute-box {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
}
```

### 例3: 画面上部に固定されるヘッダー

```css
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  z-index: 1000;
}
```

### 例4: スクロール時に上から20pxの位置で固定されるサイドバー

```css
.sticky-sidebar {
  position: sticky;
  top: 20px;
  height: fit-content;
}
```

### 例5: 画面中央に配置されるモーダル

```css
.centered-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 300px;
}
```

## TIPS

absoluteとfixedは元の領域を確保しない。absoluteは最も近い位置指定された親要素が基準、fixedはビューポートが基準。stickyはスクロール時の追従に便利。

## よくある間違い

absoluteを使う際は、親要素にrelativeを指定することを忘れがち。top/right/bottom/leftを指定しないと効果が見えない場合がある。

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

AIはposition: absoluteを使うとき基準となる祖先（position: relative等）の指定を忘れた壊れコードを出しがちです。またstickyは「親にoverflow: hidden等があると効かない」「top等の閾値指定が必須」という2大条件をよく落とします。

## AIへの依頼文例

- このposition: stickyが効かない原因を、祖先のoverflowと閾値指定の観点から調査して
- カードの右上にバッジを絶対配置したい。基準要素の指定を含めて正しく実装して

## 関連プロパティ

- [z-index](https://www.css-dictionary.com/property/z-index.md)
- [transform](https://www.css-dictionary.com/property/transform.md)
- [anchor-positioning](https://www.css-dictionary.com/property/anchor-positioning.md)