CSS Anchor Positioning: The Future of UI Placement

By Jorge Saud · January 2, 2026

The Problem with JavaScript Positioning

For years, positioning tooltips, popovers, and dropdown menus required JavaScript libraries like Popper.js or Floating UI. You’d calculate positions, handle viewport collisions, manage scroll events, and fight z-index wars.

CSS Anchor Positioning eliminates all of that. You declare which element to anchor to, and where to place the positioned element - that’s it.

The Core Concept

Anchor Positioning works in two steps:

1. Name an anchor - Give any element an anchor-name
2. Position relative to it - Use position-anchor and position-area on the positioned element

/* Step 1: Name the anchor */
.trigger-button {
  anchor-name: --my-button;
}

/* Step 2: Position relative to it */
.tooltip {
  position: fixed;
  position-anchor: --my-button;
  position-area: top center;
}

That’s the entire concept. No JavaScript coordinates, no resize observers, no manual calculations.

Real Example: Floating Summary Modal

Here’s how I position the AI summarizer modal on this site:

.summary-bubble {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 64px;
  height: 64px;
  anchor-name: --summary-bot;
}

.summary-modal {
  position: fixed;
  position-anchor: --summary-bot;
  position-area: top left;
  max-width: 400px;
  width: 90vw;
}

The modal automatically positions itself above and to the left of the button. When the button moves (different screen sizes, scroll position), the modal follows.

Understanding position-area

The position-area property uses a 9-region grid model:

┌─────────┬────────┬──────────┐
│ top     │ top    │ top      │
│ left    │ center │ right    │
├─────────┼────────┼──────────┤
│ center  │ center │ center   │
│ left    │        │ right    │
├─────────┼────────┼──────────┤
│ bottom  │ bottom │ bottom   │
│ left    │ center │ right    │
└─────────┴────────┴──────────┘

Common values:

• top center - Above the anchor, centered
• bottom left - Below the anchor, aligned left
• span-top span-left - Span across top-left quadrant

Real Example: Share Button Notification

Here’s a notification positioned relative to a share button:

#share {
  anchor-name: --share-button;
}

#notification {
  position: fixed;
  position-anchor: --share-button;
  bottom: calc(anchor(top) + 10px);
  /* Position 10px above the anchor's top edge */
}

The anchor() function gives you precise control - reference any edge of the anchor and add offsets.

Real Example: Carousel Navigation

For scroll marker navigation in carousels:

ul.carousel {
  anchor-name: --badges-carousel;
  /* ... scroll snap styles */
}

ul.carousel::scroll-marker-group {
  position: fixed;
  position-anchor: --badges-carousel;
  position-area: block-end;
  /* Positioned below the carousel */
}

Dynamic Anchor Names

For lists where each item needs its own anchor, use CSS custom properties:

---
const items = ['Item 1', 'Item 2', 'Item 3']
---

{items.map((item, i) => (
  <div style={`anchor-name: --item-${i}`}>
    {item}
  </div>
))}

Or in pure CSS with attribute selectors:

[data-anchor="tooltip-1"] {
  anchor-name: --tooltip-1;
}

[data-anchor="tooltip-2"] {
  anchor-name: --tooltip-2;
}

Viewport Collision Handling

The browser automatically handles viewport collisions with position-try:

.tooltip {
  position: fixed;
  position-anchor: --button;
  position-area: top center;

  /* Fallback positions if top doesn't fit */
  position-try: flip-block, flip-inline, flip-block flip-inline;
}

Values:

• flip-block - Flip vertically (top ↔ bottom)
• flip-inline - Flip horizontally (left ↔ right)

The anchor() Function

For precise positioning, use the anchor() function:

.positioned {
  position: fixed;
  position-anchor: --button;

  /* Position at anchor's bottom edge + 8px */
  top: calc(anchor(bottom) + 8px);

  /* Center horizontally with the anchor */
  left: anchor(center);
  translate: -50% 0;
}

The function accepts:

• anchor(top), anchor(bottom), anchor(left), anchor(right)
• anchor(center) - Center of the anchor
• anchor(start), anchor(end) - Logical properties

Browser Support (2026)

As of early 2026:

• Chrome 125+: Full support
• Edge 125+: Full support
• Firefox: Behind flag, expected soon
• Safari: Under development

For production, check support and provide fallbacks:

.tooltip {
  /* Fallback: fixed position */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@supports (anchor-name: --test) {
  .tooltip {
    position-anchor: --button;
    position-area: top center;
    transform: none;
  }
}

Key Takeaways

1. No JavaScript required - Pure CSS for positioning logic
2. Automatic updates - Positioned elements follow their anchors
3. Viewport aware - Built-in collision detection with position-try
4. Precise control - anchor() function for pixel-perfect placement
5. Progressive enhancement - Works with fallbacks for unsupported browsers

CSS Anchor Positioning is one of the most impactful CSS features in recent years. It eliminates entire categories of JavaScript code and makes UI positioning declarative and predictable.

See it in action: The floating robot button in the bottom right corner of this page uses anchor positioning for its modal. Try clicking it!