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

Status: Baseline 2026 recém disponível (Chrome 125, Safari 26.0, Firefox 147 em janeiro de 2026). Refinamentos continuam chegando (Firefox 148 position-try-order, Safari 26.2 flip-x/flip-y e position-visibility, Chrome 151/Safari 27 position-anchor: normal). Nota: `inset-area` foi renomeado para `position-area`; use o nome novo.  
Fonte: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/147 and https://webkit.org/blog/17333/webkit-features-in-safari-26-0/  
Página: https://designforai.dev/pt/css/anchor-positioning

Posiciona um elemento em relação a outro em qualquer lugar do DOM: tooltips, menus e popovers se prendem ao gatilho, `position-area` escolhe o lado, `position-try-fallbacks` os inverte quando transbordariam. Substitui Popper/Floating UI na maioria dos casos.

## HTML

```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>
```

## CSS

```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; }
```

Fallback: Proteja com `@supports (anchor-name: --a)`; caso contrário centralize o popover com `margin:auto` (padrão do popover).

## Prompt

Prenda UI flutuante com CSS anchor positioning: dê ao gatilho `anchor-name: --id`, ao painel `position-anchor: --id`, `position-area: block-end center` (ou `top`, `bottom span-right`, etc.), e `position-try-fallbacks: flip-block, flip-inline` para ele ficar dentro da viewport. Use `anchor(top)`/`anchor(--id right)` nas propriedades de inset só quando position-area não conseguir expressar o layout. Não adicione Floating UI nem Popper. Baseline desde janeiro de 2026; proteja com `@supports (anchor-name: --a)`.