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 regardless of scroll position. Fixed elements are essential for navigation">sticky navigation, floating action buttons, and persistent CTAs. Use fixed positioning sparingly—too many fixed elements reduce reading space and can frustrate users.

The property determining whether flexbox children arrange in rows (horizontal) or columns (vertical). Direction choice affects how items wrap, align, and distribute space within containers. In Framer's layout">auto layout, direction is set when choosing 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.

The space between elements in a flex or grid layout, providing consistent gutters without margin manipulation. Gap is cleaner than margins because it only applies between items, not at container edges. In Framer's auto layout, gap controls the spacing between child elements uniformly.

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 controlling how items distribute along the main axis, with options like center, space-between, and space-around. Justify content affects horizontal spacing in rows and vertical spacing in columns. Use justify content in Framer's layout">auto layout settings for precise item distribution.

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 distance between it and neighboring elements. Margins create breathing room and visual separation between content blocks. In Framer, control margins through the spacing properties or use layout">auto layout gap for more predictable spacing.

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 between an element's content and its border, creating internal breathing room. Consistent padding across elements creates visual harmony and comfortable reading experiences. Use Framer's padding controls or layout">auto layout to maintain systematic spacing throughout your design.

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 offsets an element from its normal flow position while maintaining its space in the document. Relative positioning is useful for small adjustments and creating positioning contexts for children. Prefer layout">auto layout for most layout needs over manual positioning.

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.

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, creating visual order and connection through consistent edges. Alignment is one of the fundamental principles of design that creates clean, organized layouts. In Framer, use layout">auto layout and constraints to maintain alignment across responsive breakpoints.