jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-Tools

Kostenlose CSS-Anchor-Positioning-Generator

Generiere CSS-Anchor-Positioning-Regeln für Tooltips, Dropdowns und Callouts.

Tool wird geladen...

Was ist CSS-Anchor-Positioning-Generator?

CSS Anchor Positioning ermöglicht es, ein Element mit reinem CSS an einem anderen zu verankern. Sie weisen dem Anker-Element einen anchor-name zu und verwenden position-anchor auf dem positionierten Element. Es macht JavaScript-Positionierungsbibliotheken für Tooltips, Dropdowns und Popovers überflüssig.

Kurze Antwort

Anchor Positioning ermöglicht es, ein Element mit reinem CSS an einem anderen Element auf der Seite zu befestigen, ohne JavaScript. Es ersetzt die meisten manuellen Positionsberechnungen für Tooltips, Popovers und Dropdown-Menüs.

Last updated: 2026-05-25

Einschränkungen

  • Anchor Positioning wird nur in Chrome 125+ unterstützt. Firefox und Safari unterstützen es Anfang 2026 noch nicht.
  • Das Ankerelement muss ein DOM-Vorfahre sein oder über anchor-name referenziert werden. Elemente in verschiedenen Shadow Roots funktionieren möglicherweise nicht.
  • Fallback-Positionierung mit position-fallback ist experimentell und das Verhalten variiert.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Setzen Sie einen Ankernamen für das Auslöserelement mit der anchor-name-Eigenschaft.
  2. Wählen Sie den Positionierungsbereich für das verankerte Element relativ zum Auslöser.
  3. Das Tool generiert das CSS sowohl für den Anker als auch für das positionierte Element.
  4. Kopieren Sie das CSS und kombinieren Sie es mit Ihrem Auslöser- und Popover-HTML.

Wofür du es nutzen kannst

  • Positionieren Sie einen Tooltip, der einem Button oder Link folgt.
  • Erstellen Sie ein Dropdown-Menü, das an seinem Auslöseelement ausgerichtet ist.
  • Bauen Sie einen Callout, der auf ein bestimmtes UI-Element auf der Seite zeigt.

Anwendungsfalle

Praxisbeispiele

Beispiel

Button-Tooltip mit Anchor Positioning

Ein Tooltip erscheint über einem Button mit position-area: top und position-anchor. Der Tooltip bleibt unabhängig vom umgebenden Layout am Button ausgerichtet.

Beispiel

Navigations-Dropdown-Menü

Ein Dropdown-Menü verankert sich am unteren Rand seines Navigations-Auslösers und folgt automatisch dessen Position auf der Seite.

Haufige Fehler

  • Keinen Fallback für Browser bereitzustellen, die Anchor Positioning nicht unterstützen.
  • Anchor Positioning für Inhalte zu verwenden, die auch bei deaktiviertem CSS zugänglich bleiben müssen.
  • Zu vergessen, dass Anker und positioniertes Element im selben Containment-Block sein müssen.

Überprüfung

  1. Testen Sie das positionierte Element in Chrome und prüfen Sie, ob es dem Ankerelement beim Scrollen und bei Größenänderung korrekt folgt.
  2. Stellen Sie einen JavaScript-basierten Fallback für nicht unterstützte Browser bereit.

FAQ

Fragen zu CSS-Anchor-Positioning-Generator

Welche Browser unterstützen Anchor Positioning?

Chrome 125+, Edge 125+. Safari und Firefox entwickeln die Unterstützung. Stellen Sie einen Fallback für nicht unterstützte Browser bereit.

Funktioniert Anchor Positioning mit der Popover-API?

Ja. Popovers können Anchor Positioning zur Ausrichtung an ihrem Auslöseelement verwenden.

Wie definiere ich ein Ankerelement für CSS Anchor Positioning?

Setzen Sie die anchor-name-CSS-Eigenschaft auf dem Ankerelement: anchor-name: --my-anchor;. Referenzieren Sie es dann auf dem positionierten Element mit position-anchor: --my-anchor;.

Was passiert, wenn das Ankerelement aus dem Viewport scrollt?

Standardmäßig folgt das positionierte Element dem Anker. Um es im Viewport sichtbar zu halten, kombinieren Sie Anchor Positioning mit position: fixed oder der position-try-options-Eigenschaft.

Verwandte Tools

Weitere css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool öffnen

Auch ausprobieren

Auch ausprobieren