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.

Rules that define how an element should resize or reposition when its parent container changes size. Constraints control whether elements stretch, stay fixed, or maintain proportional relationships during responsive resizing. Setting constraints correctly in Framer ensures your layouts adapt elegantly across different screen sizes.

What happens when content exceeds its container's boundaries—it can be visible, hidden, scrollable, or clipped. Overflow settings affect scrolling behavior and whether content bleeds outside containers. Hidden overflow is useful for clipping decorative elements and creating scroll containers.

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.

The horizontal measurement of an element, definable as fixed pixels, percentages, or content-based sizing. Responsive designs often use percentage or max-width rather than fixed widths for flexibility. Framer's sizing controls support fixed, relative, and content-based width options.

The point at which content becomes hidden until the user scrolls, varying by device and browser window size. The fold isn't fixed—a laptop, phone, and tablet all have different fold positions for the same page. Design for common viewport sizes while ensuring content below the fold is still discoverable and engaging.

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.