position: sticky; が効かない！ → 祖先の指定を確認

Blog Admin

久しぶりにハマりました。
stickyでメニューを固定すると見やすいだろうと思って設定したのに、スルーっと上がって行ってしまいました。。
抜け出すのに時間がかかったので、備忘録です。

CSS
stickyが効かないことがあります

開発者ツールとサイトと、過去に設定した内容とのにらめっこでした。
解決までけっこうな時間を要しました。
相変わらず、分かってしまえばあっさりと解決してしまうものです。

他人が書いたコードに手を入れるときには注意です。
そして、他人の迷惑にならないようなコードにしようと思うわけです。（難しいですが。。）

問題は祖先にあり！

自分で書いたところではないところからの影響を受けます。
これはCSSに限らずですが。

stickyのためには条件があったのです。

問題になったことと、その解決策の記録です。
1つのプロパティが原因でした。

position: sticky; と共存できない設定があります。
それがoverflow: hidden;です。

コンテンツの外側の要素を表示しないとかいった設定で、あまり安易に使わないほうがよいような気もしておりますが。。

親要素だけでなく、祖先にあたるところのいずれかで設定が入っていると、stickyできなくなってしまいます。
確認するためには、とにかく上へ上へと追いかけるしかないです。
大規模サイトだと、全文検索などを駆使してみるしかないでしょう。
開発者ツールだと目検になります。。（疲れた。。）

代替の設定は次項のとおりです。

コンテンツのはみ出しをなくしたいのなら、

contain: paint;

を使います。
これも魔法みたいなもので、コピペして使っていく感じです。

もちろんググれば詳細は調べられます。
containの中に要素を収めるとか、どうするかとかいった設定です。

コーディングしていただいたものを受け取って微調整と思ったのですが。
想定以上の調整になりました。

stickyでのメニュー設置は、実績もあるしすぐに終わるはずでした。
あれこれやりながらとはいえ、2時間近く使ってしまいました。
効率が悪すぎます。。
ちゃんと調べないといけませんね。
集合知は偉大です。

受け取った内容に文句を言うつもりではないのですが。。
そのプロパティは使わないでほしかった。

CSS