← Alle aantekeningen
CSS & UI

CSS Anchor Positioning is breed beschikbaar — Floating UI mag pensioen nemen

DV
Daan Visser22 juli 2026 · 3 min lezen

Als je ooit een tooltip, dropdown of popover hebt gebouwd, ken je Floating UI — en daarvoor Popper.js, en daarvoor die ene handgemaakte positioneringslogica die je bij elke scroll opnieuw moest berekenen. De reden voor dat alles is verdwenen. CSS Anchor Positioning bereikte Baseline 2026-status en is nu breed beschikbaar in Chrome, Firefox én Safari. De browser positioneert je tooltip voortaan zelf, zonder een regel JavaScript.

Hoe het werkt

Het model is verrassend leesbaar. Je geeft een element een naam met anchor-name: --mijn-anchor en koppelt het zwevende element eraan via position-anchor: --mijn-anchor. Positioneer je dat element dan met de anchor()-functie — iets als top: anchor(bottom) — dan neemt de browser de rest over: overlappingsdetectie, bijstellen aan de randen van het viewport, en omklappen wanneer er te weinig ruimte is. Dat flip-gedrag regel je declaratief met @position-try. Geen JavaScript-event-listeners, geen scroll-handlers, geen herberekening bij resize.

Breed beschikbaar na Safari 26

Chrome en Edge hadden al ondersteuning vanaf versie 125. Firefox voegde het toe in versie 132. Safari sloot de rij in versie 18.2 met basisondersteuning, en Safari 26 bracht volledige dekking inclusief @position-try. Met 91 procent van het wereldwijde browsergebruik gedekt is dit geen "schakel een vlag in"-feature meer — het is iets wat je vandaag zonder polyfill kunt inzetten. De Baseline 2026-classificatie is het groene licht waarop de bredere industrie wacht voordat ze een platform-feature serieus oppakt.

Onze kijk

Floating UI deed uitstekend werk als noodoplossing — maar een noodoplossing was het altijd. Positiebeheer hoort bij de browser, niet bij een JavaScript-library die event-listeners opstapelt en viewport-rekenwerkjes draait. Voor elk nieuw project of elke nieuwe component die een tooltip of dropdown nodig heeft, is er nu geen goede reden meer om Floating UI of Popper.js aan je afhankelijkheden toe te voegen. Leer anchor-name en position-anchor — het zijn tien regels CSS voor iets wat vroeger een afhankelijkheid vereiste.

Een build in gedachten?Compileer je idee →