# position: sticky

> スクロール位置に応じて、通常のフローとfixedの間で切り替わる配置方法です。指定した位置に到達するまで通常配置、到達後は固定されます。

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

## 構文

```css
position: sticky; top | right | bottom | left: <length>
```

## Tailwindでは

- 一般形: `sticky + top-{n}（top等の指定が必須）`
- 補足: クラス自体は position の項の sticky。効かないときは祖先の overflow を疑う。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 56+ / Firefox 32+ / Safari 13+ / Edge 16+

## コード例

### 例1: 上端に到達したら固定

```css
position: sticky; top: 0;
```

### 例2: 上から20pxの位置で固定

```css
position: sticky; top: 20px;
```

## TIPS

親要素にoverflow: hiddenがあると動作しない

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

stickyが効かない三大原因は「祖先のoverflow: hidden/auto」「top等の閾値未指定」「親の高さ不足（貼り付く余地がない）」です。AIは症状からこの三択に絞り込めないことが多いので、原因調査はこの順で依頼すると速いです。table のヘッダー行（th）にも使える点は意外と知られていません。

## AIへの依頼文例

- このposition: stickyが効かない原因を、祖先のoverflow・閾値・親の高さの3点から順に調査して
- テーブルのヘッダー行をスクロールで固定して。stickyをthに使う方法で

## 関連プロパティ

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