CSS Anchor Positioning heeft Baseline 2026-status bereikt: ondersteund in Chrome, Firefox én Safari, samen goed voor ruim 90% van het wereldwijde browserverkeer. De naam klinkt technisch, maar de betekenis is concreet. Voor het eerst kan een stylesheet declaratief zeggen "zet dit element naast dat andere element" — zonder dat daar een regel JavaScript voor nodig is. De browser regelt het.
Wat verdwijnt er uit je package.json
Libraries als Floating UI en Popper.js doen al jaren precies dit werk: berekenen waar een tooltip of dropdown moet landen, viewportgrenzen bewaken en de positie omdraaien zodra er te weinig ruimte is. Die logica draait op elk render-frame en kost geheugen, bytes en configuratie. CSS Anchor Positioning neemt al die taken over. Met anchor-name definieer je het referentie-element; met position-anchor koppel je het gepositioneerde element eraan; anchor() levert de exacte coördinaten in je stylesheet. Voor het omklappen aan de viewport-rand is er @position-try — CSS vervangt ook de flip-middleware.
Combineer met het popover-attribuut
Koppel CSS Anchor Positioning aan het native popover-attribuut en je hebt show/hide-gedrag én correcte plaatsing — alles in de browser, zonder framework-laag. Dat dekt zo'n 90% van de gevallen waarvoor je eerder naar Floating UI zou grijpen. Eén kanttekening: Safari 18.2 ondersteunt core-positionering maar nog niet @position-try volledig. Een nette standaardpositie als CSS-fallback is genoeg om dat op te vangen.
Onze kijk
We houden ervan wanneer de browser een hele categorie afhankelijkheden overbodig maakt. CSS Anchor Positioning is net zo'n geval als :has() of container queries: de spec bestond al, maar nu is de browserondersteuning breed genoeg om het zonder polyfill te gebruiken. Tooltip-logica hoort in een stylesheet, niet in een rAF-loop. Als je vandaag een tooltip, dropdown of popover bouwt, is dit het moment om Floating UI eruit te slopen en te kijken hoeveel CSS je terugkrijgt.
