【CSS】position: sticky を使う際の注意点

position: stickyがうまく動かない時は親要素を疑う

1. 親様子に次のCSSが入っていないか確認

body要素まで隈なくチェックしてください！！！
入っている場合は消してください。どうしても消せない場合は、代替案を考えてください。

• overflowの指定（hiddenだけでなく、scrollもダメです）

2. 親様子に次のCSSが入っているか確認

1.がダメな時は、このCSSが親要素に入っている確認してください。
これもbody要素まで確認してください。

• position: relative;

position: stickyのデバッグ方法

開発ツールで、stickyをつけている要素を上の階層に移動させてみてください。
そして、正常にstickyできるか確認してください。
これでどの親要素が悪影響を及ぼしているか確認します。

CodePenで簡単に実装してみた

実装の注意書きはSCSSにコメントで記入しております。