Anchor positioning

No Laboratório Belavista, a dica do botão “Encomendar” deve aparecer colada ao botão, não no meio da tela. Anchor positioning faz isso em CSS.

O exemplo está em pacote de exemplos/42-anchor-positioning/. Abra index.html. Ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir.

Suporte ainda varia entre navegadores. Confira no Chromium recente; se não abrir, leia o código e anote o conceito.

O que você vai aprender

• Nomear um âncora com anchor-name.
• Ligar um elemento com position-anchor e position-area.
• Usar anchor() em propriedades de inset.
• Escopo com anchor-scope quando o padrão se repete.

Amarrar dois elementos

O âncora recebe um nome com dois traços. O elemento posicionado sai do fluxo (absolute ou fixed) e aponta para esse nome.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Âncora — Belavista</title>
    <link rel="stylesheet" href="estilos.css">
  </head>
  <body>
    <main>
      <button type="button" id="encomendar" class="ancora">Encomendar</button>
      <p id="dica" class="painel" role="tooltip">Entrega em Recife em até 5 dias úteis.</p>
    </main>
  </body>
</html>

.ancora {
  anchor-name: --btn-encomendar;
  margin: 4rem 2rem;
}
.painel {
  position: absolute;
  position-anchor: --btn-encomendar;
  position-area: block-end span-inline-end;
  margin: 0.5rem 0 0;
  padding: 0.75rem 1rem;
  max-width: 16rem;
  background: #1a3a4a;
  color: #fff;
}

Mude uma coisa. Troque position-area para block-start. Preveja a dica acima do botão. Recarregue. Confira.

position-area e anchor()

position-area usa palavras como top, bottom, start, end, center e variantes com span-. Serve para a maioria dos menus e tooltips.

Para controle fino, anchor() devolve um comprimento ligado a um lado do âncora:

.painel-fino {
  position: absolute;
  position-anchor: --btn-encomendar;
  top: anchor(bottom);
  left: anchor(left);
}

Se o âncora não existir, a declaração pode falhar. Dá para passar um valor de reserva: anchor(--btn-encomendar bottom, 4rem).

Escopo e popover

Com vários cartões iguais, anchor-scope limita o nome aos descendentes do componente. Assim cada dica amarra no próprio botão.

Popover com popovertarget já traz âncora implícita. Nesse caso costuma bastar position-area e margin: unset (o popover vem com margin: auto).

Erro comum: esquecer position: absolute ou fixed no elemento posicionado. Sem isso, ele não flutua ao lado do âncora.

Outro erro: deixar margin: auto no popover com âncora implícita. O centro da tela “vence” o position-area. Use margin: unset.

Conferência no Belavista

Abra o exemplo. Tab até o botão. Se a dica for só visual, use role="tooltip" e texto curto. Em produção real você combinaria com teclado e leitores de tela; aqui o foco é a amarração CSS.

Arquivo no disco. Página no navegador. Teste em 127.0.0.1. Não publique o exercício.

Atividades

1. Para que serve o valor --btn-encomendar em anchor-name?
2. Qual a diferença prática entre position-area e anchor()?
3. Por que anchor-scope importa em uma lista de cartões repetidos?

Respostas comentadas

1. É o identificador CSS que o elemento posicionado usa em position-anchor (ou em anchor()).
2. position-area coloca o painel em uma região ao redor do âncora; anchor() calcula um comprimento para insets e cálculos.
3. Sem escopo, vários elementos com o mesmo nome competem; o último costuma “ganhar” e todas as dicas apontam para o lugar errado.