Anchor Positioning: grundlag

Hvad Anchor Positioning giver dig

Anchor Positioning gør det muligt at binde et element til et andet og lade browseren regne placeringen ud. Det er især nyttigt til popovers, tooltips, menuer og andre UI-elementer, som før ofte krævede JavaScript for at blive placeret ordentligt.

Den eksplicitte kobling

Den grundlæggende model er tre trin:

1. Giv anchor-elementet et anchor-name.
2. Giv target-elementet et position-anchor.
3. Giv target-elementet position: absolute eller position: fixed.

Det er den vigtigste struktur at få på plads. Når koblingen først findes, kan du vælge den mentale model, du bedst kan lide til selve placeringen.

To måder at tænke placering på

position-area

position-area fungerer som en implicit 3x3-grid omkring anchor-elementet, hvor anchoren er midterfeltet. Det er ofte den letteste vej ind:

.target {
  position: absolute;
  position-anchor: --anchor;
  position-area: top;
}

anchor()

anchor() er mere edge-baseret. Her tænker du i sider og offsets:

.target {
  position: absolute;
  position-anchor: --anchor;
  inset-inline-start: anchor(start);
  inset-block-start: anchor(end);
}

Hvis position-area er den hurtige grid-model, så er anchor() den mere præcise “linjér kant mod kant”-model. I praksis er position-area ofte bedst til menuer og popovers, mens anchor() er stærk når du skal finjustere eller kombinere med calc().

Implicit kobling med popover

Popovers får automatisk en implicit anchor-relation til deres invoker (knappen). Det betyder, at du i de tilfælde slet ikke behøver en eksplicit anchor-name/position-anchor-kobling.

Det gør Anchor Positioning ekstra interessant sammen med Popover API’en: interaktionen og placeringen begynder at hænge sammen mere naturligt.

Når det ikke virker efter hensigten

To gode tommelfingerregler fra OddBird og CSS Tip er: gør anchor og target til søskende, og lad anchoren komme først i DOM’en. Det er ikke et krav i alle tilfælde, men det er ofte den mest robuste start.

Et andet sted, hvor det ofte går galt, er den boks targeten regner sin placering ud fra. Det kaldes en “containing block”, men du kan tænke på det som det koordinatsystem elementet måler fra. Hvis targeten pludselig måler fra en anden boks end du regner med, ser anchor-positioning ud som om det ikke virker.

Det sker fx ofte, hvis targeten ligger inde i anchoren, og anchoren samtidig har CSS der laver et nyt lokalt koordinatsystem, som fx position: relative, position: absolute, position: fixed, transform, translate, filter eller lignende. Så begynder targeten at orientere sig efter den lokale boks i stedet for den sammenhæng du forventede, og derfor kan placeringen føles “forkert” selv om syntaksen er rigtig.

Et andet klassisk problem er rækkefølgen: hvis anchoren kommer efter targeten og selv er position: absolute eller position: fixed, kan targeten ikke finde den som forventet. Og hvis du arbejder med popover eller dialog, skal du også være opmærksom på top layer, fordi et element ikke kan ankres til noget i en højere top layer end sig selv.

Hvis det driller, så start simpelt: søskende, anchor først, ingen unødige containing blocks imellem. Kilder: OddBird og CSS Tip.