ミス1: absolute の基準が見つからない

NG: 親に position がないのでページの右上に飛んでしまう

親要素(position 未指定)
子要素(position: absolute)

→ 子要素がこのデモ枠の右上ではなく、ページ右上へ配置されます(ページをスクロールして確認できます)

OK: 親に position: relative を指定して基準にする

親要素(position: relative)
子要素(position: absolute)

→ 子要素が親要素の右上に正しく配置されます

ミス2: sticky が効かない

NG: 親に overflow: hidden があると sticky が動作しない

親要素(overflow: hidden)— スクロールしても下の要素は固定されません
スクロール領域...
sticky ヘッダー(効かない)

OK: 親の overflow: hidden を外すと sticky が効く

親要素(overflow なし)
sticky ヘッダー(効く)← スクロールすると固定されます
スクロール領域...
スクロール領域...
スクロール領域...

ミス3: fixedtransform の中で効かない

NG: 祖先に transform があると fixed がウィンドウ基準にならない

祖先要素(transform: translateX(0) あり)
position: fixed(ウィンドウ基準のはずが…)

→ transform のせいでこの赤いボックスの基準が .animated-wrapper になります

OK: transform を持つ祖先の外に fixed 要素を置く

transform あり祖先

→ fixed にしたい要素は transform を持つ祖先の外に出してウィンドウ基準を保ちます