Wer in den letzten 15 Jahren ein Tooltip, einen Popover oder ein kontextbezogenes Dropdown gebaut hat, kennt das Problem: JavaScript muss die Position berechnen, auf Resize hören, auf Scroll reagieren, Edge-Cases am Bildschirmrand abfangen. Mit der CSS Anchor Positioning API geht das 2026 nativ — ohne JavaScript, ohne Framework, ohne Bibliothek.
Hier ist, was die API kann, wie sie funktioniert und was sie für moderne Webentwicklung bedeutet.
Das Problem, das gelöst wird
Klassischer Use-Case: ein Info-Icon mit Tooltip, das beim Hover erscheint und sich neben dem Icon positioniert. Bisher: JavaScript ausrechnet die Position basierend auf der Icon-Position, fügt das Tooltip-Element ans body an, listened auf Scroll und Resize, korrigiert wenn nötig.
Mit Anchor Positioning: Du markierst das Icon als Anker, das Tooltip referenziert diesen Anker per CSS, der Browser erledigt den Rest. Auch wenn die Seite gescrollt oder das Fenster resized wird — die Position wird automatisch nachgeführt.
Die zwei zentralen CSS-Eigenschaften
anchor-name: Ordnet einem Element einen Namen zu, der von anderen Elementen referenziert werden kann.
position-anchor: Definiert, an welchem Anker sich ein absolut positioniertes Element orientiert.
Beispiel:
.info-icon {
anchor-name: --info1;
}
.tooltip {
position: absolute;
position-anchor: --info1;
top: anchor(bottom);
left: anchor(center);
translate: -50% 8px;
}Das Tooltip wird unterhalb des Icons positioniert, horizontal zentriert. Beim Scrollen oder Resizen bleibt die Position automatisch erhalten — kein JavaScript nötig.
position-try für Edge-Cases
Was passiert, wenn das Tooltip rechts vom Icon angezeigt werden soll, aber der Bildschirmrand zu nah ist? Dafür gibt es position-try: Der Browser probiert verschiedene Positionierungen durch und nimmt die erste, die nicht abgeschnitten wird.
.tooltip {
position-anchor: --info1;
top: anchor(bottom);
left: anchor(right);
position-try: flip-block, flip-inline;
}Das ist exakt der Code, für den man früher 200 Zeilen JavaScript brauchte (Stichwort: Popper.js oder Floating UI). Mit modernen CSS-Features oft überflüssig.
Browser-Support 2026
Stand Mitte 2026: Anchor Positioning ist in allen Chromium-Browsern verfügbar (Chrome, Edge ab Version 125), Safari hat 2026 die Implementierung deutlich vorangebracht, Firefox folgt voraussichtlich Ende 2026 oder 2027. Wer Anchor Positioning produktiv einsetzt, braucht eine Fallback-Strategie für Firefox-Nutzer.
Pragmatische Lösung: Das Feature in @supports-Block kapseln und für nicht unterstützende Browser eine einfachere statische Position nutzen. So degradieren Tooltips zu „funktional, aber weniger schick" — keine kaputte UX.
Use-Cases jenseits von Tooltips
Anchor Positioning ist nicht nur für Tooltips. Konkrete andere Anwendungen:
Kontext-Menüs: Rechtsklick-Menüs in Web-Apps, die sich an der Maus-Position oder am referenzierten Element ausrichten.
Dropdowns: Select-ähnliche Menüs, die unterhalb des Triggers erscheinen.
Form-Validierungs-Hinweise: Fehlerbalken, die direkt an Eingabefeldern „kleben".
Annotationen: Text-Anmerkungen in Bildern oder Dokumenten, die mit dem unterliegenden Element verknüpft bleiben.
Sidebars für Tabellen: Detail-Pop-ups bei Klick auf eine Tabellenzeile, ohne den Tabellenflow zu stören.
Kombination mit Popover API
Seit 2024 gibt es zusätzlich die Popover API in HTML — also <dialog popover> oder beliebige Elemente mit popover-Attribut. Diese Popovers haben built-in Modal-Verhalten (Escape schließt, Klick außerhalb schließt). In Kombination mit Anchor Positioning entstehen native Popovers ohne eine Zeile JavaScript:
<button popovertarget="info" style="anchor-name: --btn1">Info</button>
<div popover id="info" style="position-anchor: --btn1">
Hier sind die Details...
</div>Das ist ein Funktionalität, für die bis vor kurzem ein React-Hook plus Floating UI plus 100kb JS-Code nötig war. Jetzt: 5 Zeilen HTML, fertig.
Was das für die Web-Entwicklung bedeutet
Anchor Positioning ist ein weiterer Schritt, der die Notwendigkeit großer JavaScript-Frameworks für Standard-UI-Bedürfnisse reduziert. Zusammen mit View Transitions, dem Popover-API, Container Queries und CSS Nesting wird klassisches Webdesign 2026 deutlich mächtiger — ohne den Performance-Overhead von SPAs.
Für mich als Webdesigner heißt das konkret: Bei Standard-Sites baue ich heute mehr mit reinem HTML/CSS und weniger mit Framework-Magie. Das spart Bundle-Größe, verbessert Core Web Vitals, vereinfacht die Wartung. Mehr zu modernen Performance-Strategien im Beitrag über Core Web Vitals.
Praxis-Empfehlung 2026
Wer 2026 produktive Sites baut: Anchor Positioning auf jeden Fall im Toolkit haben, mit Fallback-Strategie für Firefox-Nutzer. Wer noch klassisch mit JavaScript-Bibliotheken positioniert: Übergangsstrategie planen — der Code wird in 2 Jahren obsolet.
Für Generator-Hilfen bei modernem CSS gibt es Tools wie den Box-Shadow-Generator, Gradient-Generator und Border-Radius-Generator — Anchor Positioning selbst ist mit ein paar Zeilen Code so geradeaus, dass kein eigener Generator nötig ist.
Bei Beratung zu modernen Web-Stacks und welche dieser neuen APIs für dein Projekt sinnvoll sind, melde dich gerne über das Kontaktformular.
