CSS Anchor Positioning: Menüs, Tooltips und Popovers ohne JavaScript

Jahrelang bedeutete das Platzieren eines Tooltips unter einer Schaltfläche oder eines Menüs an seinem Auslöser, zu einer JavaScript-Bibliothek zu greifen, die bei jedem Scrollen Rechtecke vermaß. CSS Anchor Positioning beseitigt diese Abhängigkeit. Seit 2026 im Baseline-Status, koppelt es ein Element an ein anderes, positioniert es neu, wenn es aus dem Viewport läuft, und blendet es zum richtigen Zeitpunkt aus, vollständig in CSS.

#Das Problem, das Anchor Positioning löst

Ein Dropdown-Menü, ein Tooltip oder ein Popover müssen relativ zu einem anderen Element platziert werden: der Schaltfläche, die sie öffnet. Solange diese Verankerung in CSS nicht existierte, war die einzige zuverlässige Lösung, die Koordinaten in JavaScript zu berechnen. Bibliotheken wie Floating UI, und Popper davor, existierten genau dafür: die Position des Auslösers messen, die des Viewports messen und bei jedem Scrollen und jeder Größenänderung neu berechnen.

Dieser Ansatz funktioniert, hat aber seinen Preis. Er fügt dem Bundle JavaScript hinzu, erfordert Scroll-Event-Listener und führt zu einer möglichen visuellen Verzögerung zwischen der Bewegung der Seite und der Neupositionierung des Elements. Anchor Positioning überlässt diese Arbeit der Rendering-Engine, die sie zum richtigen Zeitpunkt erledigt, ohne zwischengeschaltetes Skript.

Die folgende Tabelle fasst zusammen, was sich ändert, wenn man bei einem gewöhnlichen Menü- oder Tooltip-Komponenten von einer Positionierungsbibliothek zu nativem CSS wechselt.

Was Floating UI in JavaScript bei jedem Scrollen tat, macht der Browser jetzt nativ, zum Zeitpunkt des Renderings.

#Die Kern-Eigenschaften: anchor-name, position-anchor und anchor()

Der Mechanismus beruht auf zwei Rollen. Ein Element wird mit anchor-name als Anker deklariert. Ein anderes, mit absolute oder fixed positioniert, koppelt sich mit position-anchor an diesen Anker und liest dann mit der Funktion anchor() dessen Seiten aus.

.declencheur {
  anchor-name: --menu-profil;
}

.infobulle {
  position: absolute;
  position-anchor: --menu-profil;
  /* le haut de l'infobulle s'aligne sous le bas de l'ancre */
  top: anchor(bottom);
  left: anchor(left);
  margin-top: 8px;
}

Die Funktion anchor() akzeptiert Seiten-Schlüsselwörter (top, bottom, start, end, center) und einen Prozentwert. Keine Koordinate wird fest verdrahtet: Die Platzierung folgt dem Anker, wo immer er auf der Seite steht.

#position-area: die Platzierung in einer Deklaration

Für die häufigen Fälle bleibt anchor() Seite für Seite umständlich. Die Eigenschaft position-area beschreibt die Platzierung auf einem Drei-mal-drei-Raster, das auf den Anker zentriert ist, in einer einzigen Zeile.

.infobulle {
  position: absolute;
  position-anchor: --menu-profil;
  /* placée sous l'ancre, alignée au centre horizontal */
  position-area: bottom center;
  margin-top: 8px;
}

Die Werte lesen sich als Paar aus Zeile / Spalte: top left, bottom center, span-all, um ein ganzes Band einzunehmen. Es ist die lesbarste Art, eine Standardplatzierung auszudrücken.

#Auf dem Bildschirm bleiben: position-try-fallbacks und @position-try

Ein Menü, das unter seiner Schaltfläche platziert ist, muss nach oben klappen, wenn am unteren Bildschirmrand kein Platz mehr ist. Das ist die Aufgabe der Ausweichpositionen. position-try-fallbacks listet Alternativen auf, die die Engine der Reihe nach ausprobiert, bis eine in den Viewport passt.

.infobulle {
  position: absolute;
  position-anchor: --menu-profil;
  position-area: bottom center;
  /* si ça déborde en bas, retenter en miroir vertical, puis horizontal */
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
}

/* repli sur mesure, réutilisable */
@position-try --au-dessus {
  position-area: top center;
  margin-bottom: 8px;
  margin-top: 0;
}

Die Schlüsselwörter flip-block und flip-inline decken die meisten Bedürfnisse ab: vertikal oder horizontal spiegeln. Für eine feinere Steuerung definiert eine benannte @position-try-Regel einen vollständigen Satz von Eigenschaften, der als Ausweichlösung angewendet wird.

#Mit dem nativen Popover kombinieren und sauber ausblenden

Anchor Positioning verbindet sich auf natürliche Weise mit dem HTML-Attribut popover, das Öffnen, Schließen per Klick außerhalb und die oberste Ebene ohne JavaScript regelt. Der Anker wird am Auslöser deklariert, das Popover koppelt sich im CSS an.

<button popovertarget="menu" style="anchor-name: --btn">Profil</button>
<div id="menu" popover style="position-anchor: --btn; position-area: bottom span-right">
  <a href="/compte/">Compte</a>
  <a href="/deconnexion/">Se déconnecter</a>
</div>

Bleibt der Fall, dass der Anker beim Scrollen aus dem Blick gerät: Das gekoppelte Element ergibt keinen Sinn mehr, wenn es allein schwebt. Die Eigenschaft position-visibility blendet es automatisch aus, sobald sein Anker den Bildschirm verlässt.

.infobulle {
  position-visibility: anchors-visible;
}

#Die Barrierefreiheit nicht vergessen

Die Platzierung an das CSS zu delegieren, ersetzt nicht die semantische Arbeit. Ein mit dem Attribut popover geöffnetes Menü erhält vom Browser die Fokusverwaltung und das Schließen mit der Escape-Taste, doch die Verbindung zwischen Auslöser und Inhalt muss für assistive Technologien ausdrücklich bleiben. Die Schaltfläche behält ein aria-expanded, das den Öffnungszustand widerspiegelt, und das Popover beschreibt seine Rolle, wenn es sich um ein Navigationsmenü handelt.

<button popovertarget="menu" aria-expanded="false"
        aria-controls="menu" style="anchor-name: --btn">Profil</button>
<nav id="menu" popover aria-label="Menu du compte"
     style="position-anchor: --btn; position-area: bottom span-right">
  <a href="/compte/">Compte</a>
  <a href="/deconnexion/">Se déconnecter</a>
</nav>

Die Positionierung selbst bleibt rein visuell: Sie ändert weder die Dokumentreihenfolge noch die Tab-Reihenfolge. Ein visuell über seinem Anker gekoppeltes Element bleibt im Barrierefreiheitsbaum an der Stelle, die es im Markup einnimmt. Das ist ein Vorteil, sofern das Popover an einer schlüssigen Stelle des Quelltexts steht.

#Support-Status und Fallback-Strategie

Anchor Positioning erreichte 2026 den Baseline-Status, nachdem es in den drei Haupt-Engines standardmäßig ausgeliefert wurde. Die grundlegende Platzierung funktioniert überall; nur die maßgeschneiderten Ausweichpositionen kamen bei Safari etwas später.

Für Zielgruppen, die noch ältere Versionen nutzen, genügt eine progressive Verbesserung: eine statische Standardplatzierung, unter Bedingung mit @supports angereichert.

.infobulle { top: 100%; left: 0; } /* repli statique */

@supports (position-anchor: --x) {
  .infobulle { position-area: bottom center; }
}

#Das Wichtigste in Kürze

CSS Anchor Positioning ersetzt bei den meisten Menüs, Tooltips und Popovers eine JavaScript-Abhängigkeit, die lange als unumgänglich galt. Drei Eigenschaften decken das Wesentliche ab: anchor-name, um den Anker zu bestimmen, position-area, um zu platzieren, und position-try-fallbacks, um auf dem Bildschirm zu bleiben. In Verbindung mit dem Attribut popover lassen sich vollständige Interface-Komponenten ohne Skript bauen, mit einem sauberen Fallback für ältere Browser.

Zum Weiterlesen: Die vollständige Referenz ist auf MDN — CSS anchor positioning dokumentiert.

#Ebenfalls auf Mail Studio

• Design Tokens: ein helles/dunkles Theme, das hält
• TypeScript 7: der native Compiler in Go

“ class=“lazy-load-youtube preview-lazyload preview-youtube“ data-video-title=“A couple of great anchor positioning use cases“ title=“Play video „A couple of great anchor positioning use cases““>https://www.youtube.com/watch?v=lXS2P3xtAUY