Laying Things Out (Positioning & Structure)
Make something stick to the top or side of the screen even when you scroll.
Skill ID: LayingThingsOut_10
Description: An element (like a menu bar) stays visible at the edge of the screen as the user scrolls.
Where to apply: Top navigation bars, "Back to Top" buttons, cookie consent banners.
Key Tailwind Classes:
sticky top-0
,
fixed top-0 left-0
Gotcha:
sticky
elements only "stick" within the boundaries of their direct parent container. If the parent isn't tall enough to scroll past, the sticky element won't appear to stick.
fixed
removes the element from the normal page flow, which can cause other content to shift underneath it.