position: sticky は実際にはどのように機能し、なぜ失敗することがあるのか?

Question

Accepted Answer

`position: sticky` はハイブリッドです。要素は `relative` のように動作し (通常フローにとどまる) **まで** あなたが指定した閾値までスクロールすると、`fixed` のように動作します (その場に固定される) — ただし、その **包含ブロック** が画面上に表示されている間だけです。

```css
.section-header {
  position: sticky;
  top: 0;        /* sticks when its top edge reaches the viewport top */
}
```

`top` (または `bottom`/`left`/`right`) 値は **必須** です — これは閾値を定義します。なくても、sticky は何もしません。

## スコープ: 親内でのみ固定される

sticky 要素は**親コンテナ**に限定されます。親をスクロール*して通過*する間、その要素は固定されたままになり、親の下部が通過すると、スクロールで消えます。これが「sticky なセクションヘッダー」を機能させるもの — 各ヘッダーはそれ自身のセクションが表示されている間だけ固定されます。

## よくある「機能しない」理由 — 失敗ケース

**1. 祖先に `overflow: hidden/auto/scroll` がある。** これは #1 の原因です。sticky ポジショニングはスクロール可能な祖先によって破壊されます。要素がページではなく*その*スクロールコンテナを基準にして固定されるためです:

```css
.wrapper { overflow: hidden; } /* ❌ silently kills sticky on descendants */
```

**2. 親が十分な高さではない。** sticky が機能するには、親が sticky 要素より背が高い必要があります — 親が同じ高さの場合、スクロール可能な部分がないため、固定されたように見えません。

**3. 閾値が設定されていない。** `top`/`bottom` を忘れると固定ポイントがありません。

**4. 親の高さの制約** (例えば、要素を拡張している flex 親) もスクロール領域を削除できます。

## デバッグチェックリスト

```text
✓ Did I set top/bottom/left/right?
✓ Does ANY ancestor have overflow other than visible?
✓ Is the parent container taller than the sticky element?
```

## なぜ重要なのか

`position: sticky` は sticky ヘッダー、テーブルヘッダー、サイドバー、および JavaScript なしの「scrollspy」UI を実現します。

しかし、その特性 — 特に*どの*祖先上の `overflow` も静かにそれを破壊するという事実 — は、「なぜこれが固定されないのか?」デバッグの頻繁な原因になります。

包含ブロックスコープとオーバーフローの罠を知ることが、それを確実に使用できるようにします。