absolute の基準が見つからないNG: 親に position がないのでページの右上に飛んでしまう
→ 子要素がこのデモ枠の右上ではなく、ページ右上へ配置されます(ページをスクロールして確認できます)
OK: 親に position: relative を指定して基準にする
→ 子要素が親要素の右上に正しく配置されます
sticky が効かないNG: 親に overflow: hidden があると sticky が動作しない
OK: 親の overflow: hidden を外すと sticky が効く
fixed が transform の中で効かないNG: 祖先に transform があると fixed がウィンドウ基準にならない
→ transform のせいでこの赤いボックスの基準が .animated-wrapper になります
OK: transform を持つ祖先の外に fixed 要素を置く
→ fixed にしたい要素は transform を持つ祖先の外に出してウィンドウ基準を保ちます