CSS Anchor Positioning erklärt

Jahrelang bedeutete die Positionierung von Tooltips, Dropdown-Menüs und Popovers einen Kampf mit JavaScript-Berechnungen. Sie mussten Elemente vermessen, Scroll-Positionen verfolgen und ständig neu berechnen, um Ihre UI-Elemente korrekt ausgerichtet zu halten. CSS Anchor Positioning ändert dies grundlegend, indem es Ihnen ermöglicht, Elemente mit reinem CSS aneinander zu befestigen – ohne JavaScript.

Was ist CSS Anchor Positioning?

CSS Anchor Positioning ist eine native Browser-API, die es Ihnen ermöglicht, Elemente relativ zu anderen Elementen auf der Seite zu positionieren. Stellen Sie es sich vor wie das Erstellen unsichtbarer Verbindungen zwischen Elementen: eines fungiert als „Anker” (der Referenzpunkt) und ein anderes als „Ziel” (das positionierte Element).

Dies eliminiert die Notwendigkeit für JavaScript-Positionierungsbibliotheken beim Erstellen gängiger UI-Muster wie Tooltips, Kontextmenüs und schwebende Dialoge. Der Browser übernimmt alle komplexen Berechnungen, einschließlich Viewport-Grenzen und Scroll-Positionen.

Kerneigenschaften: Anker-Beziehungen aufbauen

Anker einrichten mit anchor-name

Zunächst müssen Sie ein Element als Anker kennzeichnen, indem Sie ihm eine eindeutige Kennung geben:

.menu-button {
  anchor-name: --main-menu;
}

Der Anker-Name muss mit doppelten Bindestrichen (--) beginnen, ähnlich wie CSS Custom Properties.

Elemente verbinden mit position-anchor

Als nächstes verbinden Sie Ihr Ziel-Element mit dem Anker:

.dropdown-menu {
  position: absolute;
  position-anchor: --main-menu;
}

Das Ziel-Element muss position: absolute oder position: fixed haben, um mit Anker-Positionierung zu funktionieren.

Elemente positionieren mit position-area

Die position-area-Eigenschaft bietet den einfachsten Weg, Ihr Ziel zu positionieren. Sie verwendet ein 3×3-Raster-Modell mit dem Anker im Zentrum:

.dropdown-menu {
  position: absolute;
  position-anchor: --main-menu;
  position-area: bottom center;
}

Sie können physische Werte (top, bottom, left, right) oder logische Werte (block-start, inline-end) für bessere Internationalisierungsunterstützung verwenden. Das span--Präfix lässt Elemente über mehrere Rasterzellen erstrecken:

.tooltip {
  position-area: top span-inline;
}

Feinabstimmung mit der anchor()-Funktion

Für präzise Kontrolle verwenden Sie die anchor()-Funktion mit inset-Eigenschaften:

.tooltip {
  position: absolute;
  position-anchor: --trigger;
  top: anchor(bottom);
  left: anchor(left);
}

Dies positioniert die obere Kante des Tooltips an der unteren Kante des Ankers, mit ausgerichteten linken Kanten. Sie können auch spezifische Anker explizit referenzieren:

.multi-anchor-target {
  top: anchor(--anchor-1 bottom);
  right: anchor(--anchor-2 left);
}

Responsive Größenanpassung mit anchor-size()

Die anchor-size()-Funktion ermöglicht es Ihnen, Elemente basierend auf den Dimensionen ihres Ankers zu dimensionieren:

.dynamic-tooltip {
  position-anchor: --button;
  width: anchor-size(width);
  max-height: calc(anchor-size(height) * 2);
}

Dies erstellt Tooltips, die proportional mit ihren Ankern skalieren – perfekt für responsive Designs.

Randfälle handhaben mit position-try

Was passiert, wenn Ihr positioniertes Element den Viewport-Rand erreicht? Die position-try-Eigenschaft bietet Fallback-Positionen:

.context-menu {
  position: absolute;
  position-anchor: --menu-trigger;
  position-area: bottom start;
  position-try: flip-block, flip-inline;
}

Der Browser versucht automatisch alternative Positionen, wenn die primäre Position einen Überlauf verursachen würde. Eingebaute Schlüsselwörter wie flip-block und flip-inline handhaben gängige Szenarien, oder Sie können benutzerdefinierte Fallbacks definieren:

@position-try --compact-menu {
  position-area: top;
  width: 200px;
}

.context-menu {
  position-try: --compact-menu, flip-block;
}

Browser-Support-Status

Stand Ende 2024 hat CSS Anchor Positioning wachsende Browser-Unterstützung:

• Chrome/Edge: Vollständige Unterstützung seit Version 125
• Safari: Unterstützt ab Version 18
• Firefox: Implementierung in Arbeit

Für den Produktionseinsatz sollten Sie das Oddbird-Polyfill in Betracht ziehen, das Kompatibilität zurück bis Firefox 54 und Chrome 51 bietet. Feature-Erkennung ist unkompliziert:

@supports (anchor-name: --test) {
  /* Anchor-Positionierungs-Styles */
}

Praktische Implementierungstipps

Bei der Implementierung von CSS Anchor Positioning für Tooltips und Menüs:

1. Setzen Sie immer die Standard-Positionierung für Popover-Elemente zurück: inset: auto
2. Verwenden Sie logische Eigenschaften für bessere Internationalisierung
3. Kombinieren Sie mit der Popover-API für vollständige JavaScript-freie Interaktionen
4. Denken Sie an die Barrierefreiheit – fügen Sie entsprechende ARIA-Attribute hinzu, um semantische Beziehungen beizubehalten

Fazit

CSS Anchor Positioning transformiert, wie wir schwebende UI-Elemente erstellen. Durch die Verlagerung der Positionierungslogik von JavaScript zu CSS erhalten wir bessere Performance, saubereren Code und automatische Behandlung von Randfällen. Während wir auf vollständige Browser-Unterstützung warten, bietet das Polyfill einen soliden Weg für den Produktionseinsatz. Beginnen Sie mit Experimenten bei Tooltips und Dropdown-Menüs – Sie werden schnell die Einfachheit des Deklarierens von Beziehungen anstelle der Berechnung von Positionen zu schätzen wissen.

Häufig gestellte Fragen

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..