Mistake 1: No reference found for absolute

NG: Parent has no position, so the child flies to the top-right of the page

Parent element (no position set)
Child (position: absolute)

→ The child is placed at the top-right of the page, not this demo box (scroll up to confirm)

OK: Add position: relative to the parent to make it the reference

Parent element (position: relative)
Child (position: absolute)

→ The child is correctly placed at the top-right of the parent

Mistake 2: sticky not working

NG: overflow: hidden on the parent breaks sticky

Parent element (overflow: hidden) — the element below will not stick when scrolling
Scrollable area...
sticky header (not working)

OK: Remove overflow: hidden from the parent and sticky works

Parent element (no overflow)
sticky header (working) ← sticks when you scroll
Scrollable area...
Scrollable area...
Scrollable area...

Mistake 3: fixed not working inside transform

NG: An ancestor with transform makes fixed relative to that ancestor instead of the window

Ancestor element (transform: translateX(0) is set)
position: fixed (should be window-relative, but…)

→ Due to transform, this red box is positioned relative to .animated-wrapper

OK: Place the fixed element outside the ancestor that has transform

Ancestor with transform

→ Move the fixed element outside the transform ancestor to keep it window-relative