【CSS】position: stickyが効かないときの原因と対処法まとめ

position: stickyは、要素をスクロールに応じて固定表示させたいときに便利なCSSプロパティです。しかし、実装しても「なぜか効かない」「意図通りに動作しない」といったトラブルに遭遇することも少なくありません。

本記事では、position: stickyが効かないときによくある原因とその対処法をわかりやすく解説します。

position: stickyとは？

position: stickyは、通常のフローに従って表示されつつ、スクロール位置に応じて指定した位置で固定されるプロパティです。top, bottom, left, rightなどのオフセットと一緒に使うことで効果を発揮します。

.sticky-box {
  position: sticky;
  top: 0;
}

以下の表に代表的な原因とその対処法をまとめました。

原因	説明	対処法
親要素に`overflow: hidden`や`overflow: auto`が指定されている	親要素のスクロールコンテナがstickyを無効にすることがある	`overflow`を`visible`に変更するか、sticky要素の親構造を見直す
sticky要素に`top`などの位置指定がない	オフセットがないとstickyのトリガーが発動しない	`top: 0`や`top: 10px`など明示的に指定する
stickyの親要素に高さがない	stickyの判定には親の高さが必要	親要素に適切な`height`や`min-height`を設定する
`display: table-cell`や`flex`環境下での制限	特定のレイアウト環境ではstickyが効きにくい	`block`や`inline-block`に変更するか、構造を見直す
スクロールコンテナが`body`以外になっている	スクロール対象が親要素で、そこにstickyが効かない	sticky対象とスクロール要素の関係を再確認する

<div class="wrapper" style="overflow: hidden;">
  <div class="sticky-box" style="position: sticky; top: 0;">固定したい要素</div>
</div>

→ wrapperにoverflow: hiddenがあるため、stickyは効きません。

<div class="wrapper">
  <div class="sticky-box" style="position: sticky; top: 0;">固定したい要素</div>
</div>

→ 親のoverflowを削除すれば、stickyが正しく機能します。

position: stickyはモダンブラウザでは広くサポートされていますが、IE11では無効です。サポート対象を確認し、必要に応じてJavaScriptによる代替実装も検討しましょう。

position: stickyが効かないときは、以下のポイントを確認しましょう。

小さな見落としがstickyの動作を妨げる原因になります。ぜひ本記事をチェックリストとして活用してください。