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

Baseline 2026 neu verfügbar (Chrome 125, Safari 26.0, Firefox 147 im Januar 2026). Verfeinerungen landen weiter (Firefox 148 position-try-order, Safari 26.2 flip-x/flip-y und position-visibility, Chrome 151/Safari 27 position-anchor: normal). Hinweis: `inset-area` wurde in `position-area` umbenannt; nutze den neuen Namen.

Chrome 125Edge 125Safari 26Firefox 147

Positioniert ein Element relativ zu einem anderen irgendwo im DOM: Tooltips, Menüs und Popover heften sich an ihren Auslöser, `position-area` wählt die Seite, `position-try-fallbacks` klappt sie um, wenn sie überlaufen würden. Ersetzt Popper/Floating UI in den meisten Fällen.

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: Sichere mit `@supports (anchor-name: --a)` ab; sonst zentriere das Popover mit `margin:auto` (Popover-Default).

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

Prompt

Hefte schwebendes UI mit CSS Anchor Positioning an: gib dem Auslöser `anchor-name: --id`, dem Panel `position-anchor: --id`, `position-area: block-end center` (oder `top`, `bottom span-right` usw.) und `position-try-fallbacks: flip-block, flip-inline`, damit es im Viewport bleibt. Nutze `anchor(top)`/`anchor(--id right)` in inset-Properties nur, wenn position-area das Layout nicht ausdrücken kann. Füge kein Floating UI oder Popper hinzu. Baseline seit Januar 2026; sichere mit `@supports (anchor-name: --a)` ab.