Positionierung in CSS ist ein altbekanntes Thema: Man kann HTML-Elemente absolut positionieren, oder relativ, oder sticky, oder… - aber bisher nur im Bezug auf den Viewport. Um die Position eines Elements relativ zu einem anderen Element festzulegen, musste man bisher einigen Aufwand betreiben. Eine neue Technik macht diese Aufgabe jetzt sehr viel leichter: Mit dem sogenannten Anchor Positioning genügen im einfachsten Fall schon vier CSS-Deklarationen, und der Browser macht den Rest. Chrome-basierte Browser unterstützen diese Technik schon seit einiger Zeit, seit Mitte Januar 2026 gehört sie zur Baseline. Das bedeutet, mindestens die aktuellsten Versionen der wichtigsten Browser (Firefox, Chrome, Edge, Safari) können mit Anchor Positioning umgehen. Insgesamt wird, laut Can I use, über 81% der aktuell weltweit verwendeten Browser abgedeckt.
Eine zentrale Rolle spielt anchor-name. Mit dieser CSS-Eigenschaft legt man den Namen des Ankers fest, an dem sich dann die Position anderer Elemente orientieren kann:
.anchor {
anchor-name: --myanchor;
width: 50px;
height: 50px;
background-color: lightblue;
}
Der Name beginnt, ähnlich wie bei CSS-Variablen, mit zwei Minuszeichen. Die Elemente, die relativ zu unserem Anker positioniert werden sollen, müssen absolute oder fixed positioniert werden und mit position-anchor den Anker referenzieren. Mit position-area gibt man an, wie genau die Positionierung aussehen soll:
.details {
position: fixed;
position-anchor: --myanchor;
position-area: bottom right;
width: 25px;
height: 25px;
background-color: lightgreen;
}
.moredetails {
position: fixed;
position-anchor: --myanchor;
position-area: top left;
width: 25px;
height: 25px;
background-color: orange;
}
Das Ergebnis sieht etwa so aus: 
.details ist unten rechts angeordnet, .moredetails oben links, beides eben relativ zu .anchor. Wo die Elemente, denen diese Klassen zugewiesen sind, im DOM stehen, spielt dabei keine Rolle.
Diese Grundlagen kratzen aber nur an der Oberfläche dessen, was Anchor Positioning ermöglicht. Zum Beispiel gibt es die CSS-Eigenschaft position-try-fallbacks. Damit kann man festlegen, wo das Element positioniert werden soll, wenn an der mit position-area definierten Position nicht genügend Platz ist. position-try-fallbacks: flip-block; zum Beispiel meint “wenn nicht genügend Platz ist, spiegele die Position des Elements entlang der Blockachse”. Mit position-visibility: anchors-visible; kann man festlegen, dass das positionierte Element nicht angezeigt werden soll, wenn auch der Anker nicht angezeigt wird (weil er beispielsweise von anderen Elementen überdeckt wird).
Damit werden also Tooltips, Autocompletes oder Drop-Down-Menus deutlich einfacher. Weitere Informationen gibt es im MDN.
