Wat is CSS Anchor Positioning Generator?
CSS-ankerpositionering laat u een element aan een ander element koppelen met alleen CSS. U kent een anchor-name toe aan het ankerelement en gebruikt position-anchor op het gepositioneerde element. Het elimineert de noodzaak van JavaScript-positioneringsbibliotheken voor tooltips, dropdowns en popovers.
Snel antwoord
Ankerpositionering laat u een element aan een ander element koppelen met alleen CSS, zonder JavaScript. Het vervangt handmatige positieberekeningen voor tooltips, popovers en dropdowns.
Last updated: 2026-05-25
Beperkingen
- Alleen Chrome 125+. Firefox en Safari ondersteunen het nog niet (begin 2026).
- Het ankerelement moet een DOM-voorouder zijn of via anchor-name worden verwezen.
- Terugvalpositionering met position-fallback is experimenteel.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Zo gebruik je deze tool
- Stel een ankernaam in voor het triggerelement met de anchor-name eigenschap.
- Kies het positioneringsgebied voor het verankerde element.
- De tool genereert CSS voor zowel anker als gepositioneerd element.
- Kopieer de CSS en koppel deze aan uw trigger en popover HTML.
Waarvoor je het kunt gebruiken
- Positioneer een tooltip die een knop of link volgt.
- Maak een dropdown-menu uitgelijnd aan het triggerelement.
- Bouw een callout die naar een specifiek UI-element wijst.