Anchor Positioning vs position: fixed — When to Use Which

The Quick Answer

Scenario	Use
Element follows another element	Anchor positioning
Element pinned to viewport (header, FAB)	position: fixed
Element absolutely placed inside a parent (no following)	position: absolute
Tooltip / dropdown / popover	Anchor positioning
Modal dialog (centered)	position: fixed + inset: 0
Modal dialog (anchored to trigger)	Anchor positioning
Sticky table headers	position: sticky
Floating action button	position: fixed

Why anchor positioning beats position: absolute for tooltips

Before anchor positioning, the tooltip pattern was:

<span style="position: relative;">
  <button>Trigger</button>
  <div class="tooltip" style="position: absolute; bottom: 100%; left: 50%;">...</div>
</span>

This works but has problems:

1. Wrapper required: every trigger needs a position: relative parent.
2. Overflow clipping: if any ancestor has overflow: hidden (very common in cards, modals, and <details> elements), the tooltip is clipped.
3. No automatic flipping: if the trigger is near the viewport edge, the tooltip overflows.
4. Sibling-only: the tooltip must be a sibling of the trigger or a descendant of the same wrapper.

Anchor positioning fixes all four. The target can live anywhere in the document; anchor-name and position-anchor connect them across the DOM.

Why position: fixed is still useful

position: fixed doesn't follow another element — it just stays put in the viewport. For headers, sidebars, FABs, and toast notifications, that's exactly what you want.

You can combine the two: a target with position: fixed; position-anchor: --x; position-area: bottom is fixed in viewport coordinates but tracks an anchor inside a scrolling container. This is the right pattern for tooltips that should escape overflow: hidden ancestors.

Migration strategy

Existing code with position: absolute tooltips works fine — there's no need to migrate. Adopt anchor positioning incrementally: new components get the new approach, old components stay until you touch them for other reasons.