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.

A parent element that holds and organizes child elements, defining boundaries for layout and positioning. Containers with maximum widths prevent content from becoming too wide on large screens while allowing full-width backgrounds. Framer's containers support auto layout, padding, and responsive size controls for flexible layouts.

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

The property that determines whether flexbox children are arranged in rows (horizontal) or columns (vertical). This setting affects wrapping, alignment, and spacing behavior within a flex container. In Framer layout">auto layout, direction maps to horizontal or vertical stacking.

A CSS layout system designed for one-dimensional layouts, distributing space among items in rows or columns. Flexbox excels at navigation bars, card rows, and any content that should grow or shrink responsively. Framer's auto layout is powered by flexbox concepts, making these layouts visual and intuitive.

The bottom section of a webpage, typically containing navigation links, copyright information, and secondary content like contact details or social links. Footers provide a sense of closure and catch visitors who've scrolled through all content. Design footers to be useful—include key links users might need after reading your page.

A layout system that divides space into rows and columns, creating alignment and structure for content placement. Grid systems ensure visual consistency and make responsive design more predictable. Framer supports CSS Grid concepts through layout tools that adapt columns and gaps across breakpoints.

The top section of a webpage, typically containing the logo, main navigation, and key actions like sign-in buttons. Headers establish brand identity and provide consistent navigation across all pages. Design headers to be useful without overwhelming—users should find what they need without excessive visual competition.

A flexbox property that controls how items are distributed along the main axis, using values like center, space-between, and space-around. It affects horizontal spacing in rows and vertical spacing in columns. In Framer layout">auto layout, it helps control distribution and balance.

The arrangement of visual elements on a page, establishing structure, hierarchy, and flow of information. Good layout guides the eye naturally through content while creating visual harmony. Consider reading patterns—users typically scan in F or Z patterns on text-heavy pages.

The space outside an element’s border, creating separation from neighboring elements. Margin helps control rhythm and spacing between blocks of content. In Framer, use spacing controls and layout">auto layout gap for consistent, predictable layout behavior.

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 space inside an element, between its content and border. Padding improves readability and visual balance by creating internal breathing room. Consistent padding values help maintain a coherent design system.

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 distinct content area of a page, typically spanning full width and containing related information. Sections organize long pages into digestible chunks with clear visual separation. Design sections with consistent spacing, backgrounds, and layouts that create rhythm as users scroll.

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.

A CSS property controlling stack order when elements overlap, with higher values appearing in front of lower values. Z-index management becomes complex with many overlapping elements—establish systematic layer naming. In Framer, layer order in the sidebar determines stacking with z-index overrides available.

Links and content in the page footer providing secondary navigation, legal links, and supplementary information. Footers catch users who've scrolled through all content and need next steps. Include popular pages, contact information, and trust signals like security badges.

The primary navigation links typically placed in the site header, providing access to main sections. Header navigation should prioritize the most important destinations while remaining uncluttered. Design mobile variations carefully, often using hamburger menus to save space.

A vertical navigation or content panel typically positioned at the page edge, common in dashboards and documentation. Sidebars provide persistent access to navigation while leaving room for main content. Design sidebars to collapse gracefully on smaller screens.

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.

The positioning of elements relative to each other or a container to create visual order and clarity. Strong alignment improves scanability and perceived quality. In Framer, layout">auto layout and constraints help maintain consistent alignment across breakpoints.