Anchor Positioning: patterns i praksis

Fikseret til elementet, ikke til viewporten

Anchor Positioning bliver for alvor spændende, når du kombinerer det med position: fixed. Så kan et element være fixed i layout-forstand, men stadig være bundet til et bestemt UI-element.

Det er præcis det close-button-eksemplet viser:

Pointen er, at knappen ikke bare ligger i et tilfældigt hjørne af viewporten. Den ligger fast på popoverens hjørne, selv om selve popoveren er scrollbar eller flytter sig.

Dynamiske panels og nav-mønstre

Login-panelet i navigationen er et godt mere “rigtigt” UI-pattern. Her bruges anchor positioning til at knytte et panel til sin trigger, uden at man behøver hårdkodede offsets eller ekstra wrapper-mekanik.

Det er en stærk kombination med popover, fordi triggeren allerede findes, og panelet allerede opfører sig som et overlay. Anchor Positioning løser så selve placeringen på en mere robust måde.

Et andet mønster, hvor Anchor Positioning kommer til sin ret, er klassiske burger-menuer, hvor menuen åbner i en position relateret til menu-knappen.

Når der ikke er plads: position-try

Fallback-placeringer er en vigtig del af anchor positioning i praksis. Når der ikke er plads på den foretrukne side af anchoren, kan du give browseren alternative placeringer at prøve.

Et enkelt mønster kan se sådan ud:

.panel {
  position: absolute; /* eller fixed */
  position-anchor: --trigger;
  position-area: bottom span-right;
  position-try: flip-inline;
}

Og hvis du vil definere mere kontrollerede alternativer, kan du bruge @position-try og referere dem via position-try-fallbacks.

Det er værdifuldt, fordi en anchor-løsning ellers hurtigt kan falde fra hinanden ved viewportkanter eller i små layouts.

Hvis du får brug for endnu mere kontrol, er justify-self: anchor-center, anchor-size() og position-visibility gode næste steder at kigge. De er ikke nødvendige for at komme i gang, men de viser hvor bredt Anchor Positioning faktisk er ved at blive som layoutværktøj.