Closed2023/02/25にクローズ6

position sticky + overflow-y、stickyが効かなくなるのはなぜ？

そもそもpositoin:stickyとは

CSSのpotion: sticky;には、スティッキーアイテムとスティッキーコンテナという2つの主要部分が必要
スティッキーアイテム
- potion: sticky;でスタイルを定義した要素
- ビューポート（画面表示領域）における当該要素のポジションが定義したポジションと一致すると、フロートする
スティッキーコンテナ
- スティッキーアイテムをラップするHTML要素
- スティキーアイテムがフロートすることができる最大のエリアになる

何がscroll containerなのか
- overflow-x, overflow-y, overflowのいずれかのプロパティが設定されていて且つ、それらの値がhidden, scroll, autoである要素はscroll container
- htmlおよびbody要素のoverflow系プロパティの値をいじらなければviewportが暗黙的にscroll containerとなる
scroll containerとstickyの関係
- position: sticky;が付与された要素は直近の祖先であるscroll containerのscrollportを基準にして張り付く仕様となっている

結論
- overflow-yとstickyを安易に併用すると
- viewport以外の要素が「直近の祖先であるscroll container」となり
- 当初の想定とは異なる位置（viewport以外の要素を基準とした位置）にstickyitemが固定されてしまうため
- stickyが効かない！となってしまう

このスクラップは2023/02/25にクローズされました