# position: absolute / fixed / sticky の違い

> 祖先基準で自由配置がabsolute、画面に完全固定がfixed、「閾値まで通常・そこから貼り付き」がsticky。fixedはtransform等を持つ祖先がいると画面基準でなくなる罠があります。

- URL: https://www.css-dictionary.com/compare/absolute-vs-fixed-vs-sticky/

## 比較表

| 観点 | absolute | fixed | sticky |
| --- | --- | --- | --- |
| 配置の基準 | position指定のある最も近い祖先 | ビューポート（※transform等の祖先で変わる） | 最も近いスクロールコンテナと親要素の範囲 |
| スクロール時 | ページと一緒に動く | 常に画面に固定 | 閾値までは通常、以降は固定に切替 |
| 元のレイアウト領域 | 抜ける（詰まる） | 抜ける | 残る |
| 必須の相棒 | 基準にする祖先のposition: relative | inset系での位置指定 | top等の閾値指定 |
| 典型用途 | バッジ、ドロップダウン | ヘッダー、FAB、モーダル | 目次、テーブルヘッダー、セクション見出し |

## 使い分けの指針

stickyが効かない三大原因は「祖先のoverflow: hidden/auto」「top等の閾値未指定」「親の高さ不足」です。fixedが画面基準にならないときは祖先のtransform/filter/will-changeを疑ってください。単純な固定ヘッダーはstickyの方が領域が残る分、レイアウトが簡単なことも多いです。

## AIがよくやる取り違え

AIはfixedのモーダルが祖先のtransformで壊れるケースをなかなか特定できません。「スタッキングコンテキストと包含ブロックの観点で調査して」と方向付けると速く解決します。

## それぞれの詳しい解説

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