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

Baseline 2026 recién disponible (Chrome 125, Safari 26.0, Firefox 147 en enero de 2026). Siguen llegando mejoras (Firefox 148 position-try-order, Safari 26.2 flip-x/flip-y y position-visibility, Chrome 151/Safari 27 position-anchor: normal). Nota: `inset-area` pasó a llamarse `position-area`; usa el nombre nuevo.

Chrome 125Edge 125Safari 26Firefox 147

Posiciona un elemento en relación a otro en cualquier parte del DOM: tooltips, menús y popovers se anclan a su disparador, `position-area` elige el lado, `position-try-fallbacks` los voltea cuando desbordarían. Sustituye a Popper/Floating UI en la mayoría de casos.

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: Protégelo con `@supports (anchor-name: --a)`; si no, centra el popover con `margin:auto` (el valor por defecto de popover).

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

Prompt

Ancla la interfaz flotante con CSS anchor positioning: da al disparador `anchor-name: --id`, al panel `position-anchor: --id`, `position-area: block-end center` (o `top`, `bottom span-right`, etc.) y `position-try-fallbacks: flip-block, flip-inline` para que se mantenga dentro del viewport. Usa `anchor(top)`/`anchor(--id right)` en propiedades inset solo cuando position-area no pueda expresar el layout. No añadas Floating UI ni Popper. Baseline desde enero de 2026; protégelo con `@supports (anchor-name: --a)`.