explorando a nova API de posicionamento do CSS, anchor-positioning... (anchor())

Como Funciona

O elemento âncora recebe um nome com anchor-name, enquanto o elemento posicionado usa position-anchor para se referenciar a ele. As funções anchor() e anchor-size() permitem calcular posições relativas automaticamente, com fallback nativo quando não há espaço suficiente.

Exemplos Práticos

Tooltip Simples

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

.tooltip {
  position: absolute;
  position-anchor: --botao;
  bottom: anchor(top);
  left: anchor(center);
  translate: -50% -8px;
}

Tag de Preço

.produto {
  anchor-name: --produto;
}

.tag-desconto {
  position: absolute;
  position-anchor: --produto;
  top: anchor(top);
  right: anchor(left);
  translate: 50% -50%;
}

Menu Dropdown

.nav-item {
  anchor-name: --nav;
}

.dropdown-menu {
  position: absolute;
  position-anchor: --nav;
  top: anchor(bottom);
  left: anchor(left);
  position-try-options: flip-block, flip-inline;
  /* Inverte automaticamente se não couber */
}

suporte

Semana passada shipou no firefox, então estamos safe pra usar...