Anchor positioning nativo chega estável ao Chrome e à Web

Durante anos, posicionar um menu “colado” a um botão - que segue o botão no scroll, vira pro outro lado quando não cabe, e continua alinhado no resize - exigiu uma biblioteca de JS medindo retângulos a cada frame. Anchor positioning move isso pro CSS.

O que muda na prática

Você marca um elemento como âncora e outro como posicionado em relação a ela:

.botao { anchor-name: --menu-toggle; }

.menu {
  position: absolute;
  position-anchor: --menu-toggle;
  inset-block-start: anchor(bottom);
  inset-inline-start: anchor(start);
  position-try-fallbacks: flip-block, flip-inline;
}

O position-try-fallbacks é a parte boa: se o menu não couber embaixo, o browser tenta em cima; se não couber à direita, tenta à esquerda. Sem ResizeObserver, sem loop de medição.

O polyfill ainda importa

O repositório oddbird/css-anchor-positioning é o polyfill de referência - o mesmo time que ajudou a desenhar a spec. Ele cobre os navegadores que ainda não têm suporte nativo, com a mesma sintaxe, então dá pra adotar hoje e remover o polyfill depois sem tocar no CSS.

Para uma UI com muitos overlays, a economia de bundle e de trabalho por frame é real. Vale migrar os casos simples primeiro (tooltip, dropdown) e deixar os fluxos complexos por último.