A CSS layout method that removes an element from the normal document flow and positions it relative to its nearest positioned ancestor. This technique is useful for overlays, badges, and decorative elements that need precise placement regardless of surrounding content. Use sparingly, as absolutely positioned elements don’t affect the layout of other elements and can cause overlap issues on different screen sizes.

A positioning method that anchors elements relative to the browser viewport, keeping them visible during scrolling. Fixed elements are useful for sticky navigation, floating action buttons, and persistent calls to action. Use fixed positioning sparingly to avoid blocking content and reducing usable space.

The CSS property determining how an element is placed in the document flow—static, relative, absolute, fixed, or sticky. Understanding positioning is essential for creating overlays, sticky elements, and complex layouts. Framer provides visual controls for common positioning patterns.

Positioning that keeps an element in normal document flow while allowing offset adjustments from its default location. It is useful for minor visual nudges and for establishing a positioning context for absolutely positioned children. Prefer layout tools for larger structural alignment.

A hybrid positioning method where elements behave normally until reaching a scroll threshold, then fix in place. Sticky positioning creates headers that stay visible during scrolling within their container. Use sticky for navigation, sidebar elements, and persistent calls to action.

A navigation bar that remains fixed at the top of the viewport as users scroll down the page. Sticky navigation keeps primary actions accessible without scrolling back up. Ensure sticky elements don't consume too much screen space on mobile.