【CSS】position:sticky が効かない時に確認すること【備忘録】

2022年6月、ついにIEのサポートが終了しますね。よっしゃー！！！！！
それに伴い、気軽に使えるようになるCSSプロパティがたくさんあります。
今回の記事は、その中のひとつ position:stickey についての備忘録です。

position:stickey は、少ないCSSの記述でスクロールに応じてページ要素を固定表示できる素敵CSSプロパティですよね！
とっても便利なのでよく使用するのですが、その度に忘れっぽい性格の私は
「あれ？うまく動作しないやんけ」と数分悩んで、
「そうだ！この記述書くの忘れてたわ！」と思い出すことが多々あるので、ここに書き残しておきます。

①top:0 がない

position:sticky を使用する上で基本中の基本なのですが、top:0 が抜けているとうまく動作しません。

.hoge{
　position:sticky
　top: 0
}

のように、セットで書きましょう。

②先祖要素にoverflow:visible（初期値）以外が設定されている

意外と忘れがち、overflow 問題。
先祖要素にoverflow: hidden とか scroll とか設定してるとstickyはうまく動作しません。
これよく忘れて引っ掛かる率ナンバーワンじゃないでしょうか？私がそうです。

先祖要素には、overflow:visible（初期値）のみ設定するようにしましょう。

まとめ

今回はposition:sticky が効かない・うまく動かない時に確認する事項をまとめました。
基本的なことなんですけど、忘れがちですよね。

何らかの参考になれば幸いです。
読んでくださった皆様のコーディングライフに幸あれ～！