比較記事一覧に戻る
position: absolute / fixed / sticky の違い
TL;DR — ひとことで言うと
祖先基準で自由配置がabsolute、画面に完全固定がfixed、「閾値まで通常・そこから貼り付き」がsticky。fixedはtransform等を持つ祖先がいると画面基準でなくなる罠があります。
比較表
| 観点 | 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で壊れるケースをなかなか特定できません。「スタッキングコンテキストと包含ブロックの観点で調査して」と方向付けると速く解決します。