Introdução ao Posicionamento por Âncora CSS

O posicionamento por âncora permite posicionar um elemento em relação a outro usando apenas CSS.

Defina a âncora com anchor-name no elemento de referência e use position-anchor no alvo para criar a ligação.

Use position-area para escolher uma área numa grelha de nove quadrantes em torno da âncora, usando preferencialmente propriedades lógicas.

Empregue position-try para especificar posições alternativas quando não houver espaço disponível.

A função anchor() combina-se com propriedades inset para alinhar as bordas do alvo às da âncora, com suporte a cálculos via calc().

Opte por propriedades lógicas (inset-block-start, inset-inline-start) em vez de físicas (top, left) para maior acessibilidade e adaptabilidade.

O método ajusta-se responsivamente, mudando a posição conforme o espaço disponível sem necessidade de JavaScript.