position: sticky;とは、ヘッダやナビゲーション、サイドバーなど指定した要素をスクロールした際にぴたっと指定した位置に貼り付ける（スティッキー）便利なプロパティ。
.some-component{
position: sticky;
top: 0;
align-self: start; /* CSS Grid,Flexboxの場合はalign-selfプロパティをリセット */
} スティッキーアイテムとスティッキーコンテナ
position: sticky;の仕様を把握する際に必ず理解しなければならないのが、スティッキーアイテムとスティッキーコンテナの存在である。position: sticky;の指定をされた要素のことをスティッキーアイテムといい、スティッキーアイテムを囲う親要素のことをスティッキーコンテナという。
スティッキーコンテナに特別な指定は必要なく、position: sticky;を指定するとその親要素が自動的にスティッキーコンテナとなる。
ただし、スティッキーアイテムはスティッキーコンテナ内でしかフロートすることができない。
またスティッキーアイテムとスティッキーコンテナの数や組み合わせによって挙動も変わってくる。
position: stickyが効かない場合
スティッキーコンテナ内の要素がスティッキーアイテムのみの場合
スティッキーアイテムが移動できるスペースがないため、フロートしない。
スティッキーアイテムはスティッキーコンテナ内でしかフロートすることができないというのは、言い換えれば、スティッキーコンテナに移動出来るスペースがなければフロート出来ないということになる。
つまりスティッキーコンテナにスティッキーアイテムがピッタリ収まっている場合、スティッキーアイテムは移動出来る範囲がないため動作しない。
また、display: flexで横並びにした場合、初期値のままではフレックスアイテム同士の高さが揃ったままになりがちになる。高さが揃ったままだと固定化できない。
align-items: flex-start や height指定などでフレックスアイテム毎の高さを出すようにする。
親・祖先要素にoverflow: hiddenを指定している
親要素だけでなく、祖先要素にoverflow: hiddenを指定している場合は固定化できない。
overflow: hiddenは、はみ出した要素を表示上カットする際に使用されることがある。
ポジション指定がない
「top、botom、right、left」のポジション指定がないと固定化できない。top: 0など、ブラウザのどこに固定化したいか指定する。
なお、<table>要素の列などを横スクロールで固定化する場合には、「left、right」プロパティを指定する。
【参考】
https://coliss.com/articles/build-websites/operation/css/css-position-sticky-how-it-really-works.html
https://www.plusbits.jp/creative/1065/
