CSS Anchor Positioning: was es kann, und warum MDN weiterhin von eingeschränkter Verfügbarkeit spricht

CSS Anchor Positioning bindet ein absolut positioniertes Element an ein anderes, sodass ein Tooltip seinem Button ohne eine Zeile JavaScript folgt. Das ist wirklich elegant. Es ist laut MDNs eigenem Banner aber auch noch nichts, was man bedingungslos ausliefern kann - und vieles, was 2026 veröffentlicht wurde, behauptet das Gegenteil.

Die drei Bausteine

Das Modell ist klein. Sie benennen ein Element als Anker, richten ein anderes Element auf diesen Namen aus und positionieren relativ dazu.

.trigger {
  anchor-name: --my-trigger;
}

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

anchor-name registriert das Element unter einem eigenen Bezeichner. position-anchor verknüpft das positionierte Element mit diesem Bezeichner. Die Funktion anchor() löst sich dann zu einer Kante des Ankers auf: anchor(bottom) ist die Unterkante des Ankers, ausgedrückt im Koordinatenraum des positionierten Elements.

Mehr als syntaktischer Zucker wird es durch das Verhalten am Rand des Viewports. Ein Tooltip, das unter seinem Auslöser hängt, sollte nach oben klappen statt abgeschnitten zu werden, und genau diese Logik ist der Grund, warum es überhaupt Positionierungsbibliotheken gibt. Anchor Positioning bietet sie deklarativ über Ausweichpositionen: Sie führen alternative Platzierungen auf, und der Browser nimmt die erste, die passt.

Warum die Begeisterung dem Support vorauseilte

Chrome lieferte Anchor Positioning 2024 aus, und eine Welle von Beiträgen verkündete daraufhin, natives CSS habe Tooltip-Bibliotheken abgelöst. Suchen Sie 2026 danach, finden Sie Behauptungen über Baseline-Status und Abdeckungswerte in den Neunzigern.

Die MDN-Seite zu position-anchor trägt derzeit ein anderes Banner: eingeschränkte Verfügbarkeit, mit der Erläuterung, dass dieses Feature nicht Baseline ist, weil es in einigen der meistgenutzten Browser nicht funktioniert. Das ist die Referenzdokumentation der Eigenschaft selbst, und ihr ist zu trauen, wenn Sekundärquellen ihr widersprechen.

Das ist kein Grund, das Feature zu ignorieren. Es ist ein Grund, das Banner an dem Tag, an dem Sie ausliefern wollen, selbst auf MDN nachzusehen, statt eine Aussage aus einem Artikel zu übernehmen, der beim Schreiben optimistisch war.

Wie man es nutzt, ohne darauf zu wetten

Fragen Sie das Feature ab. @supports ist der Unterschied zwischen Progressive Enhancement und einem kaputten Layout für alle auf der falschen Engine:

.tooltip {
  /* Ausweichplatzierung, die überall funktioniert */
  position: absolute;
  top: 100%;
  left: 0;
}

@supports (anchor-name: --x) {
  .trigger { anchor-name: --my-trigger; }
  .tooltip {
    position-anchor: --my-trigger;
    top: anchor(bottom);
    left: anchor(left);
  }
}

Schreiben Sie zuerst die gewöhnliche Positionierung und lassen Sie die verankerte Variante sie innerhalb der Abfrage überschreiben. Browser, die Verankerung verstehen, bekommen das gute Verhalten; die anderen bekommen etwas, das trotzdem funktioniert.

Die ehrliche Zusammenfassung: Anchor Positioning weist in die richtige Richtung und lohnt sich schon jetzt zu lernen, aber ein Produktions-Tooltip braucht 2026 weiterhin einen Weg für Engines ohne Unterstützung. Die Bibliothek ersatzlos zu löschen ist eine Entscheidung, die man aus der Kompatibilitätstabelle trifft, nicht aus einer Überschrift.

Wo es in die übrige Plattform passt

Anchor Positioning ergänzt sich natürlich mit der Popover-API, die das Anzeigen und Schließen übernimmt, während die Verankerung die Platzierung übernimmt, und mit dem dialog-Element für Fälle, die einen echten Modal brauchen. Beide sind beim Support weiter, was mit ein Grund ist, zuerst dorthin zu greifen.

Kurz gefasst

anchor-name markiert den Anker, position-anchor verbindet sich damit, anchor() löst dessen Kanten auf, und Ausweichpositionen regeln das Umklappen nahe einer Viewport-Kante. MDN führt die Eigenschaft als eingeschränkt verfügbar und ausdrücklich nicht als Baseline. Nutzen Sie sie hinter @supports, behalten Sie einen gewöhnlichen Fallback, und schauen Sie am Tag der Auslieferung in die Kompatibilitätstabelle, statt einem Prozentwert aus einem Blogbeitrag zu vertrauen.