CSSで要素をスクロールに追従させるために便利なposition: sticky;。ところが、親要素にoverflow: hidden;が指定されていると、思ったようにstickyが機能しないことがあります。この記事では、その原因と対処法についてわかりやすく解説し、最近注目されているoverflow: clip;を使った解決方法もご紹介します。
なぜ position: sticky; が効かなくなるのか？
position: sticky; は、要素の親要素が「スクロールコンテナ」として機能しているときに効果を発揮します。しかし、親要素に overflow: hidden; が指定されていると、その要素が「スティッキーの制約コンテナ」となり、子要素の sticky が意図したとおりに働かないことがあります。
つまり、親の overflow: hidden; が、position: sticky; の基準を壊してしまうのです。
解決策は overflow: clip; の活用
CSSのoverflowにはさまざまな値がありますが、2021年頃から使えるようになったoverflow: clip;は、hiddenと似た見た目を持ちながら、内部的な挙動が異なります。
・overflow: hidden; → スクロールコンテナを分断する（stickyが効かない）
・overflow: clip; → スクロールコンテナを分断しない（stickyが効く）
そのため、親要素に overflow: clip; を指定することで、position: sticky; が正常に動作するようになります。
まとめ
overflow: hidden;は便利なプロパティですが、何も考えずに使うと sticky や z-index などの思わぬCSSバグにつながります。今後は、目的に応じて overflow: clip; も選択肢に入れるようにすると、より柔軟で意図どおりのレイアウトが可能になります。
