Anchor positioning: anchor(), position-area, position-try

Baseline 2026 newly available (Chrome 125, Safari 26.0, Firefox 147 in January 2026). Refinements keep landing (Firefox 148 position-try-order, Safari 26.2 flip-x/flip-y and position-visibility, Chrome 151/Safari 27 position-anchor: normal). Note: `inset-area` was renamed `position-area`; use the new name.

Chrome 125Edge 125Safari 26Firefox 147

Positions one element relative to another anywhere in the DOM: tooltips, menus and popovers attach to their trigger, `position-area` picks the side, `position-try-fallbacks` flips them when they would overflow. Replaces Popper/Floating UI for most cases.

Anchored below, flips above near the bottom edge.

CSS

.fx-036-btn{anchor-name:--fx-036;padding:8px 14px;font:600 14px system-ui}
.fx-036{
  position-anchor:--fx-036;position-area:block-end center;margin:6px 0;
  position-try-fallbacks:flip-block;
  inset:auto;width:max-content;max-width:220px;padding:8px 12px;border:0;border-radius:8px;background:#111;color:#fff;font:13px system-ui;
}
.fx-036 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

HTML

<button class="fx-036-btn" popovertarget="fx-036-tip">Hover-free tooltip</button>
<div id="fx-036-tip" popover class="fx-036">Anchored below, flips above near the bottom edge.</div>

Fallback: Guard with `@supports (anchor-name: --a)`; otherwise center the popover with `margin:auto` (popover default).

Source: developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/147 and https://webkit.org/blog/17333/webkit-features-in-safari-26-0/

Prompt

Attach floating UI with CSS anchor positioning: give the trigger `anchor-name: --id`, the panel `position-anchor: --id`, `position-area: block-end center` (or `top`, `bottom span-right`, etc.), and `position-try-fallbacks: flip-block, flip-inline` so it stays in the viewport. Use `anchor(top)`/`anchor(--id right)` in inset properties only when position-area cannot express the layout. Do not add Floating UI or Popper. Baseline since January 2026; guard with `@supports (anchor-name: --a)`.