【CSS】overflow:hiddenの中に、position:stickyを使いたい時の対処法
スクロールに応じて要素を固定表示させたいときに便利なのがposition: sticky;です。
しかし、親要素や祖先要素にoverflow: hidden;があるとstickyは効かなくなってしまいます。
単純にoverflow: hidden;を使わなければ解決しますが、場合によってはどうしても使わざるを得ないこともあります。
そんなときにおすすめなのが、「overflow: clip;」です。
結果：position:sticky;は効いていますが、子要素がはみ出たままです。
結果：子要素のはみ出た部分が非表示になりましたが、position:sticky;が効いていません。
親要素にoverflow: clip;を設定した場合
結果：position:sticky;が効いたまま、子要素のはみ出た部分は非表示になっています。
まとめ
- position: sticky;が効かない時は、親要素や祖先要素のoverflowをチェック
- デザイン上どうしても要素を隠したい場合は、overflow: clip;を使う
たったこれだけで、スクロールに合わせた固定表示を簡単に実現できます。
Webデザイナー / コーダーのみなさまへ
株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。
サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。
