Use CSS Anchor Positioning

Build Tooltips, Dropdowns, and Popovers with Pure CSS

CSS anchor positioning is a revolutionary layout mechanism that lets you position elements relative to other elements without JavaScript calculations. Part of the CSS Position Layout Module Level 4, this feature enables developers to create tooltips, dropdown menus, card overlays, and contextual interfaces that stay connected to their reference elements as the viewport changes.

Before anchor positioning, developers relied on JavaScript libraries like Popper.js or complex viewport calculations to achieve relative positioning. Now, with native browser support, you can declare positioning relationships directly in CSS, improving performance and reducing bundle size. This approach aligns with modern CSS techniques like type-safe styling with Panda CSS for building maintainable interfaces.

Core Concepts of CSS Anchor Positioning

Understanding anchor positioning requires grasping three fundamental concepts that form the foundation of this CSS module.

The Anchor Element

The anchor element serves as the reference point for positioned elements. You define an anchor using the anchor-name property, which creates a named anchor association that other elements can reference.

An element can serve as an anchor for multiple positioned elements, and multiple elements can share the same anchor name for coordinated positioning.

Creating an anchor element
1.anchor-element {2 /* Define the anchor name */3 anchor-name: --my-tooltip-anchor;4 5 /* Anchor can be any positioned element */6 position: relative;7}

The Target Element

The target element is the box that gets positioned relative to its anchor. Using the position-anchor property, you attach the target to a specific anchor by its name. The target uses the anchor's position as its positioning context.

Creating a target element
1.tooltip {2 /* Attach to the anchor by name */3 position-anchor: --my-tooltip-anchor;4 5 /* Required for anchor positioning to work */6 position: absolute;7}

The Anchor Box

The anchor box defines the reference area used for positioning calculations. By default, the anchor box is the element's margin box, but you can customize this using the position-anchor property with values like auto, content, or border.

Customizing the anchor box
1/* Use content box as anchor reference */2.tooltip {3 position-anchor: --my-tooltip-anchor content;4}5 6/* Use border box as anchor reference */7.popover {8 position-anchor: --my-tooltip-anchor border;9}

Positioning with position-area

The position-area property uses a 3x3 grid system to define where the target element appears relative to its anchor. This intuitive approach divides the space around the anchor into nine regions.

Using position-area values
1.tooltip {2 position-anchor: --my-tooltip-anchor;3 position: absolute;4 5 /* Position tooltip above the anchor */6 position-area: top;7 8 /* Or position in specific corners */9 position-area: top left;10 position-area: top right;11 position-area: bottom center;12}

Anchor Functions: anchor() and anchor-size()

Beyond position-area, CSS provides two powerful functions for precise control over anchor-based positioning. These functions work well alongside advanced CSS techniques like CSS custom animations and transitions for creating polished interfaces.

The anchor() Function

The anchor() function retrieves a position or dimension from the anchor element. Use it with inset properties like top, left, right, or bottom for custom positioning.

Using the anchor() function
1.popover {2 position-anchor: --my-anchor;3 position: absolute;4 5 /* Position 8px from the anchor's left edge */6 left: anchor(--my-anchor, 8px);7 8 /* Position at 50% of the anchor's width */9 left: anchor(--my-anchor, 50%);10 11 /* Use keyword positions from anchor */12 left: anchor(--my-anchor, left);13 right: anchor(--my-anchor, right);14}

The anchor-size() Function

The anchor-size() function retrieves the width or height of the anchor element, enabling sizing the target relative to its anchor's dimensions.

Using the anchor-size() function
1.tooltip {2 position-anchor: --my-anchor;3 position: absolute;4 5 /* Match the anchor's width */6 width: anchor-size(--my-anchor, width);7 8 /* Match the anchor's height */9 height: anchor-size(--my-anchor, height);10 11 /* Use inline or block dimensions */12 width: anchor-size(--my-anchor, inline-size);13 height: anchor-size(--my-anchor, block-size);14}

Fallback Positions with position-try-fallbacks

When an element's preferred position doesn't fit in the viewport, position-try-fallbacks provides alternative positions to try. The browser attempts each fallback in order until one fits.

Defining fallback positions
1.tooltip {2 position-anchor: --info-icon;3 position: absolute;4 5 position-area: top;6 7 /* Fallback positions if 'top' doesn't fit */8 position-try-fallbacks: bottom, left, right;9}

Custom Try Positions with @position-try

The @position-try at-rule creates reusable, named try positions that can be referenced in position-try-fallbacks. This enables complex fallback strategies with custom sizing and alignment.

Creating custom try positions
1/* Define custom try positions */2@position-try --flip-up {3 position-area: top;4 margin-bottom: 8px;5}6 7@position-try --flip-down {8 position-area: bottom;9 margin-top: 8px;10}11 12@position-try --align-left {13 position-area: right;14 margin-left: 8px;15}16 17.tooltip {18 position-anchor: --trigger;19 position: absolute;20 21 /* Reference the custom try positions */22 position-try-fallbacks: --flip-up, --flip-down, --align-left;23}

Sizing Priority with position-try-order

The position-try-order property controls which dimension takes priority when selecting fallback positions. This is useful when you want certain sizing behaviors to influence position selection.

Using position-try-order
1.tooltip {2 position-anchor: --trigger;3 position: absolute;4 5 position-area: top;6 position-try-fallbacks: bottom, left, right;7 8 /* Prioritize available width */9 position-try-order: most-width;10 11 /* Other options: */12 /* position-try-order: most-height; */13 /* position-try-order: minimum-area; */14}

Visibility Control with position-visibility

The position-visibility property controls what happens when the anchor element is partially or fully outside the viewport. This prevents floating elements from appearing in inaccessible locations.

Using position-visibility values
1.tooltip {2 position-anchor: --trigger;3 position: absolute;4 position-area: top;5 6 /* Hide if anchor is partially clipped */7 position-visibility: anchors-valid;8 9 /* Hide if anchor is fully clipped */10 position-visibility: no-overflow;11 12 /* Always show (default) */13 position-visibility: always;14}

Common Use Cases

CSS anchor positioning excels in several common interface patterns. Here are practical examples for real-world applications.

Tooltips

Tooltips are the canonical use case for anchor positioning. Create informative overlays that stay connected to their trigger elements.

Complete tooltip example
1.info-icon {2 anchor-name: --info-trigger;3 position: relative;4}5 6.info-tooltip {7 position-anchor: --info-trigger;8 position: absolute;9 position-area: top;10 position-try-fallbacks: bottom, left, right;11 position-visibility: anchors-valid;12 13 /* Tooltip styling */14 padding: 8px 12px;15 background: #1e293b;16 color: white;17 border-radius: 6px;18 font-size: 14px;19 max-width: 250px;20}

Dropdowns and Menus

Dropdown menus benefit greatly from anchor positioning, with automatic fallback to available screen space.

Dropdown menu example
1.dropdown-trigger {2 anchor-name: --menu-button;3}4 5.dropdown-menu {6 position-anchor: --menu-button;7 position: absolute;8 position-area: bottom;9 position-try-fallbacks: --flip-up;10 11 /* Menu styling */12 min-width: 200px;13 padding: 8px 0;14 background: white;15 border: 1px solid #e2e8f0;16 border-radius: 8px;17 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);18}19 20/* Custom try position for menu */21@position-try --flip-up {22 position-area: top;23 margin-bottom: 4px;24}

Card Overlays and Badges

Position badges, notification indicators, or overlay elements relative to their parent cards.

Card badge example
1.product-card {2 anchor-name: --product-badge;3}4 5.badge {6 position-anchor: --product-badge;7 position: absolute;8 position-area: top right;9 10 /* Badge styling */11 padding: 4px 8px;12 background: #ef4444;13 color: white;14 border-radius: 9999px;15 font-size: 12px;16 font-weight: 600;17}

Best Practices and Performance

Following these guidelines ensures optimal performance and user experience when using CSS anchor positioning.

Performance Optimization

  • Prefer position-area over anchor() for simple positioning -- The browser can optimize position-area calculations more efficiently.

  • Limit fallback chains -- Each fallback position requires additional calculation. Stick to 2-3 essential fallbacks.

  • Use position-visibility for hidden anchors -- Prevents orphaned tooltips when users scroll past anchor points.

  • Avoid animating position-area -- Instead, use CSS transforms for smooth transitions between states.

  • Test on target devices -- Complex anchor chains can impact scrolling performance on lower-end devices.

Browser Support and Progressive Enhancement

CSS anchor positioning has excellent browser support in modern browsers. Chrome, Edge, Firefox, and Safari all support the feature, making it safe to use for most projects.

For older browsers, implement progressive enhancement by hiding anchor-positioned elements and falling back to static or JavaScript-based positioning. Complement anchor positioning with web fonts optimization for comprehensive performance gains.

Progressive enhancement pattern
1/* Modern browsers get anchor positioning */2@supports (position-anchor: --test) {3 .tooltip {4 position-anchor: --trigger;5 position-area: top;6 }7}8 9/* Fallback for older browsers */10@supports not (position-anchor: --test) {11 .tooltip {12 /* Static positioning or JavaScript fallback */13 display: none;14 }15}

Conclusion

CSS anchor positioning represents a significant advancement in layout capabilities for the web platform. By eliminating JavaScript dependencies for relative positioning, you create faster, more maintainable interfaces that scale gracefully.

The combination of anchor-name, position-anchor, and position-area provides an intuitive API for common positioning patterns. Fallback positions, custom try positions, and visibility controls handle edge cases without additional code.

For modern web development, particularly in Next.js applications, CSS anchor positioning enables you to build interactive interfaces with minimal bundle size and optimal performance. Explore how striped backgrounds and CSS patterns can complement anchor positioning for visually rich interfaces. Start incorporating anchor positioning today to create responsive, context-aware interfaces that work seamlessly across all devices.

Ready to build modern, performant interfaces? Our web development services can help you implement cutting-edge CSS techniques like anchor positioning across your projects.

Ready to Build Modern Web Interfaces?

Our expert developers can help you implement CSS anchor positioning and other modern techniques for faster, more maintainable applications.

Sources

  1. MDN Web Docs - CSS Anchor Positioning Guide -- Comprehensive documentation on anchor positioning concepts and properties.

  2. web.dev - Learn CSS: Anchor Positioning -- Interactive tutorial covering practical anchor positioning patterns.

  3. CSS-Tricks - A Complete Guide to CSS Anchor Positioning -- In-depth guide with examples and browser compatibility information.

  4. Ahmad Shadeed - CSS Anchor Positioning -- Detailed analysis with visual examples and use cases.