CSS Layout

Anchor Positioning

Written by Swapnil RajaPublished 30 Jul 2026

Position tooltips, menus, and callouts relative to an anchor while providing fallback placements for constrained space. The chapter covers anchor association, relative insets, position areas, sizing, fallbacks, and progressive enhancement.

Anchor positioning keeps a floating element tied to its reference without copying viewport coordinates into JavaScript. It expresses association, placement, size, and overflow alternatives as part of the browser's layout calculation.

Tooltips, teaching callouts, and menus often belong to one trigger but must escape ordinary document flow; anchor positioning describes that relationship in the layout system. It can also test alternate positions when the preferred side would place content outside the visible area. This topic also connects with CSS Position and Logical Properties.

Associate an anchored element

Give the reference element an anchor-name, then associate an absolutely or fixed-positioned element with that name through position-anchor.

Example

css

.trigger {
  anchor-name: --trigger;
}

.tooltip {
  position: absolute;
  position-anchor: --trigger;
  position-area: block-start center;
}

Use anchor-relative lengths

The anchor() function resolves an inset against an edge of the associated anchor. anchor-size() can use the anchor's dimensions when the positioned element needs to match it.

Example

css

.menu {
  position: fixed;
  position-anchor: --trigger;
  inset-block-start: calc(anchor(block-end) + 0.5rem);
  inset-inline-start: anchor(inline-start);
  min-width: anchor-size(width);
}

Plan for constrained space

A preferred position can overflow near a viewport edge. Position-try fallbacks let the browser test alternate placements without measuring coordinates in JavaScript.

Keep anchored content inside the viewport

A preferred anchor position is not enough for a menu or tooltip near an edge. position-try-fallbacks gives the browser an ordered list of alternative placements. The position-try shorthand can combine fallback placement with the order in which alternatives are tested.

Example

css

.tooltip {
  position-area: block-end center;
  position-try-fallbacks:
    flip-block,
    flip-inline,
    flip-block flip-inline;
}

@position-try --above {
  position-area: block-start center;
}

.menu {
  position-try-fallbacks: --above, flip-inline;
  position-visibility: anchors-visible;
}

Use predefined flip tactics for common collision handling and @position-try when a fallback needs custom inset, margin, sizing, or alignment declarations. position-visibility can hide positioned content when its anchor is no longer visible, but hiding must never make required information unreachable.

Anchor Positioning Reference

Syntax	Purpose	Example
anchor-name	Names the reference element.	anchor-name: --trigger
position-anchor	Associates a positioned element.	position-anchor: --trigger
position-area	Places the element in an anchor-relative region.	position-area: block-end
anchor()	Returns an anchor-relative inset.	top: anchor(bottom)
position-try-fallbacks	Lists alternative placements when the preferred position overflows.	position-try-fallbacks: flip-block
@position-try	Defines a named custom fallback placement.	@position-try --above { ... }
position-visibility	Conditionally hides unusable anchored content.	position-visibility: anchors-visible

Complete Example

Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.

Complete runnable example

html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Anchor Positioning example</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.5;
    }
    main { max-width: 70rem; margin-inline: auto; }
    article, section, aside, form, .card, .panel {
      padding: 1rem;
      border: 1px solid #cbd5e1;
      border-radius: 0.6rem;
    }

.trigger {
  anchor-name: --trigger;
}

.tooltip {
  position: absolute;
  position-anchor: --trigger;
  position-area: block-start center;
}

.menu {
  position: fixed;
  position-anchor: --trigger;
  inset-block-start: calc(anchor(block-end) + 0.5rem);
  inset-inline-start: anchor(inline-start);
  min-width: anchor-size(width);
}

.tooltip {
  position-area: block-end center;
  position-try-fallbacks:
    flip-block,
    flip-inline,
    flip-block flip-inline;
}

@position-try --above {
  position-area: block-start center;
}

.menu {
  position-try-fallbacks: --above, flip-inline;
  position-visibility: anchors-visible;
}
  </style>
</head>
<body>
  <main><button class="trigger">Account</button><aside class="tooltip menu">Account settings</aside></main>
</body>
</html>

Browser Support

Feature	Chrome	Edge	Firefox	Safari
anchor-name	125	125	147	26
position-area	129	129	147	26
@position-try	125	125	147	26
position-try-fallbacks	128	128	147	26
position-visibility	125	125	147	26.2

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.

Notes

Anchor positioning is progressive enhancement. Keep the anchored content usable when the positioning declarations are unsupported.
Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
Use a fallback when the support table shows that one of your required browsers predates the feature.

Conclusion

Anchor positioning expresses the relationship between a trigger and positioned content directly in CSS. A production implementation also needs overflow fallbacks, logical placement, keyboard-safe markup, and a usable baseline for browsers without support.

Support is evolving, so test each property in the table, keep the source order meaningful, and ensure the content remains reachable when anchor declarations are ignored.

PreviousCSS Position NextCSS Float