position: sticky;をoverflow系のプロパティと組み合わせて使うと期待通りに動かなくなってしまう理由 | したがき帳みなさんこんにちは。 position: sticky;とoverflow系のプロパティを組み合わせて使ったとき往々にして発生する要素が意図した位置に張り付かなくなってしまう挙動は、いささか分かりづらい点があるためこれに頭を抱えたことがある人は多いことでしょう。 そのため今回の記事では先の挙動がなぜ起こってしまうのか、その理由を記していこうと思います。 結論 position: sticky;を付与している要素が開発者の意図しているscroll containerに属していないため、先の挙動が発生していると考えられます。 この時点で理解された方はこの先の文章は蛇足と感じるかもしれません。逆に疑問符が頭上に浮かんだ方はこの先で記すposition: sticky;とscroll containerの関係性を知ることで知見が広がるはずなので是非読み進めてみてください。 閑話休題、それでは詳しい
