Die CSS Anchor Positioning API ist ein entscheidender Faktor in der Webentwicklung, da Sie damit Elemente nativ relativ zu anderen Elementen positionieren können. Diese werden als Anchors bezeichnet. Diese API vereinfacht komplexe Layoutanforderungen für viele Funktionen der Benutzeroberfläche wie Menüs und Untermenüs, Kurzinfos, Auswahlmöglichkeiten, Labels, Karten, Dialogfelder für Einstellungen und vieles mehr. Dank der integrierten Ankerpositionierung im Browser können Sie Benutzeroberflächen mit mehreren Ebenen erstellen, ohne auf Drittanbieterbibliotheken zurückgreifen zu müssen. Dadurch eröffnen sich unendlich viele kreative Möglichkeiten.
Die Positionierung von Ankern ist ab Chrome 125 verfügbar.
Unterstützte Browser
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
Kernkonzepte: Anker und positionierte Elemente
Das Herzstück dieser API ist die Beziehung zwischen Anchors und positionierten Elementen. Ein Anker ist ein Element, das mithilfe der Eigenschaft anchor-name
als Bezugspunkt angegeben wird. Ein positioniertes Element ist ein Element, das relativ zu einem Anker mithilfe der position-anchor
-Eigenschaft oder explizit anchor-name
in seiner Positionierungslogik platziert wird.
![](https://developer.chrome.com/blog/anchor-positioning-api/image/anchor-diagram-0.png?hl=de)
Anker einrichten
Das Erstellen eines Ankers ist ganz einfach. Wenden Sie die Anchor-Name-Eigenschaft auf das ausgewählte Element an und weisen Sie ihm eine eindeutige Kennung zu. Dieser eindeutigen Kennung muss, ähnlich wie bei einer CSS-Variablen, ein doppelter Bindestrich vorangestellt werden.
.anchor-button {
anchor-name: --anchor-el;
}
Nachdem Sie einen Ankernamen zugewiesen haben, dient .anchor-button
als Anker und dient als Anhaltspunkt für die Platzierung anderer Elemente. Sie können diesen Anker auf zwei Arten mit anderen Elementen verbinden:
Implizite Anker
Die erste Möglichkeit, einen Anker mit einem anderen Element zu verbinden, ist die Verwendung eines impliziten Ankers wie im folgenden Codebeispiel. Die Eigenschaft position-anchor
wird dem Element hinzugefügt, das Sie mit dem Anker verbinden möchten. Sie hat den Namen des Ankers (in diesem Fall --anchor-el
) als Wert.
.positioned-notice {
position-anchor: --anchor-el;
}
Bei einer impliziten Ankerbeziehung können Sie Elemente mithilfe der Funktion anchor()
positionieren, ohne den Ankernamen explizit beim ersten Argument anzugeben.
.positioned-notice {
position-anchor: --anchor-el;
top: anchor(bottom);
}
Explizite Anchors
Alternativ können Sie den Ankernamen direkt in der Ankerfunktion verwenden (z. B. top: anchor(--anchor-el bottom
). Dies wird als expliziter Anker bezeichnet und ist praktisch, wenn Sie bei mehreren Elementen verankern möchten (siehe Beispiel).
.positioned-notice {
top: anchor(--anchor-el bottom);
}
Elemente relativ zu Ankern positionieren
<ph type="x-smartling-placeholder">![](https://developer.chrome.com/blog/anchor-positioning-api/image/anchor-diagram-1.png?hl=de)
Die Positionierung der Anker baut auf der absoluten CSS-Positionierung auf. Wenn Sie Positionswerte verwenden möchten, müssen Sie dem positionierten Element position: absolute
hinzufügen. Verwenden Sie dann die Funktion anchor()
, um Positionswerte anzuwenden. Wenn Sie beispielsweise ein verankertes Element links oben positionieren möchten, verwenden Sie die folgende Positionierung:
.positioned-notice {
position-anchor: --anchor-el;
/* absolutely position the positioned element */
position: absolute;
/* position the right of the positioned element at the right edge of the anchor */
right: anchor(right);
/* position the bottom of the positioned element at the top edge of the anchor */
bottom: anchor(top);
}
<ph type="x-smartling-placeholder">![](https://developer.chrome.com/blog/anchor-positioning-api/image/anchor-diagram-2.png?hl=de)
Jetzt haben Sie ein Element mit einem anderen verankert:
<ph type="x-smartling-placeholder">Für die Verwendung der logischen Positionierung dieser Werte gelten folgende Entsprechungen:
top
=inset-block-start
left
=inset-inline-start
bottom
=inset-block-end
right
=inset-inline-end
Ein positioniertes Element mit anchor-center
zentrieren
Damit Sie das positionierte Ankerelement im Verhältnis zu seinem Anker leichter zentrieren können, gibt es einen neuen Wert namens anchor-center
, der mit den Eigenschaften justify-self
, align-self
, justify-items
und align-items
verwendet werden kann.
In diesem Beispiel wird das vorherige Element geändert, indem justify-self: anchor-center
verwendet wird, um das positionierte Element über seinem Anker zu zentrieren.
.positioned-notice {
position: absolute;
/* Anchor reference */
position-anchor: --anchor-el;
/* Position bottom of positioned elem at top of anchor */
bottom: anchor(top);
/* Center justification to the anchor */
justify-self: anchor-center;
}
<ph type="x-smartling-placeholder">justify-center
.Mehrere Anker
Elemente können mit mehr als einem Anker per Tethering verbunden werden. Das bedeutet, dass Sie möglicherweise Positionswerte festlegen müssen, die relativ zu mehr als einem Anker positioniert sind. Dazu verwenden Sie die anchor()
-Funktion und geben explizit an, auf welchen Anker Sie im ersten Argument verweisen. Im folgenden Beispiel ist die linke obere Ecke eines positionierten Ankers an der unteren rechten Ecke eines Ankers und die untere rechte des positionierten Elements oben links des zweiten Ankers verankert:
.anchored {
position: absolute;
top: anchor(--one bottom);
left: anchor(--one right);
right: anchor(--two left);
bottom: anchor(--two top);
}
<ph type="x-smartling-placeholder">Position mit inset-area
Zusätzlich zur standardmäßigen Richtungspositionierung von der absoluten Positionierung aus gibt es einen neuen Layout-Mechanismus in der Anchoring API: Einfügungsbereich.
Der eingefügte Bereich erleichtert das Platzieren von Ankerelementen relativ zu ihren jeweiligen Ankern. Für die Funktion wird ein Raster mit neun Zellen verwendet, bei dem sich das Verankerungselement in der Mitte befindet.
Verschiedene Positionierungsoptionen für den eingefügten Bereich, dargestellt auf dem 9-Zellen-Raster
Wenn Sie anstelle der absoluten Positionierung den eingefügten Bereich verwenden möchten, verwenden Sie das Attribut inset-area
mit physischen oder logischen Werten. Beispiel:
- Oben in der Mitte:
inset-area: top
oderinset-area: block-start
- Links Mitte:
inset-area: left
oderinset-area: inline-start
- Unten in der Mitte:
inset-area: bottom
oderinset-area: block-end
- Rechts Mitte:
inset-area: right
oderinset-area: inline-end
Um diese Positionen genauer zu untersuchen, sehen Sie sich das folgende Tool an:
<ph type="x-smartling-placeholder">Elemente mit anchor-size()
skalieren
Die anchor-size()
-Funktion, die ebenfalls Teil der Anchor Positioning API ist, kann verwendet werden, um die Größe oder Position eines Ankerelements anhand der Größe seines Ankers (Breite, Höhe oder Inline- und Blockgrößen) festzulegen oder zu positionieren.
Im folgenden CSS wird ein Beispiel für die Verwendung dieses Werts für die Höhe gezeigt. Dabei wird anchor-size(height)
in einer calc()
-Funktion verwendet,um die maximale Höhe der Kurzinfo auf die doppelte Höhe des Ankers festzulegen.
.positioned-notice {
position-anchor: --question-mark;
/* set max height of the tooltip to 2x height of the anchor */
max-height: calc(anchor-size(height) * 2);
}
<ph type="x-smartling-placeholder">anchor-size
Anker mit Elementen der obersten Ebene wie Popover und Dialogfeld verwenden
Die Positionierung von Ankern funktioniert mit Elementen der obersten Ebene wie popover
sehr gut. und <dialog>
. Während diese Elemente in einer vom Rest der DOM-Unterstruktur getrennten Ebene platziert werden, können Sie sie mithilfe der Positionierung von Anker an eine Tethering-Verbindung zurückverfolgen und mit Elementen, die sich nicht im obersten Layer befinden, mit ihnen scrollen. Das ist ein großer Gewinn für mehrschichtige Benutzeroberflächen.
Im folgenden Beispiel wird eine Reihe von Kurzinfo-Popovers über eine Schaltfläche zum Öffnen ausgelöst. Die Schaltfläche ist der Anker und die Kurzinfo das positionierte Element. Sie können das positionierte Element wie jedes andere verankerte Element gestalten. In diesem konkreten Beispiel sind anchor-name
und position-anchor
Inline-Stile für die Schaltfläche und die Kurzinfo. Da jeder Ankername einen eindeutigen Ankernamen benötigt, ist dies beim Generieren von dynamischem Inhalt die einfachste Methode.
popover
Ankerpositionen mit @position-try
anpassen
Nachdem Sie die anfängliche Position des Ankers ermittelt haben, können Sie die Position anpassen, wenn der Anker die Kanten des enthaltenden Blocks erreicht. Zum Erstellen alternativer Ankerpositionen können Sie die Anweisung @position-try
zusammen mit der Eigenschaft position-try-options
verwenden.
Im folgenden Beispiel wird rechts neben einem Menü ein Untermenü angezeigt. Menüs und Untermenüs eignen sich hervorragend zur Verwendung der Anchor Positioning API zusammen mit dem Popover-Attribut, da diese Menüs tendenziell an einer Triggerschaltfläche verankert sind.
Wenn horizontal nicht genügend Platz in diesem Untermenü zur Verfügung steht, können Sie es stattdessen unter das Menü verschieben. Richten Sie dazu zunächst die Ausgangsposition ein:
#submenu {
position: absolute;
position-anchor: --submenu;
/* initial position */
margin-left: var(--padding);
inset-area: right span-bottom;
}
Richten Sie dann mit @position-try
die verankerten Fallback-Positionen ein:
/* alternate position */
@position-try --bottom {
margin: var(--padding) 0 0 var(--padding);
inset-area: bottom;
}
Verbinden Sie die beiden zuletzt mit position-try-options
. Insgesamt sieht das so aus:
#submenu {
position: absolute;
position-anchor: --submenu;
/* initial position */
margin-left: var(--padding);
inset-area: right span-bottom;
*/ connect with position-try options */
position-try-options: --bottom;
}
/* alternate position */
@position-try --bottom {
margin: var(--padding) 0 0 var(--padding);
inset-area: bottom;
}
<ph type="x-smartling-placeholder">popover
Keywords für automatisches Umblättern von Ankerpositionen
Wenn Sie eine grundlegende Anpassung haben, z. B. von oben nach unten oder von links nach rechts (oder beides), können Sie sogar die Erstellung benutzerdefinierter @position-try
-Deklarationen überspringen und die integrierten, browsergestützten Keywords wie flip-block
und flip-inline
verwenden. Sie dienen als eigenständige Deklarationen für benutzerdefinierte @position-try
-Deklarationen und können miteinander kombiniert werden:
position-try-options: flip-block, flip-inline, flip-block flip-inline;
Flip-Keywords können Ihren Ankercode erheblich vereinfachen. Mit nur wenigen Linien können Sie einen voll funktionsfähigen Anker mit alternativen Positionen erstellen:
#my-tooltip {
position-anchor: --question-mark;
inset-area: top;
position-try-options: flip-block;
}
<ph type="x-smartling-placeholder">position-try-options: flip-block
verwendenposition-visibility
für Anker in Subscrollers
Es gibt einige Fälle, in denen Sie ein Element innerhalb eines Subscrollers der Seite verankern möchten. In diesen Fällen können Sie die Sichtbarkeit des Ankers mit position-visibility
steuern. Wann bleibt der Anker sichtbar? Wann verschwindet er? Mit dieser Funktion haben Sie die Kontrolle über diese Optionen. Sie verwenden position-visibility: anchors-visible
, wenn das positionierte Element so lange sichtbar bleiben soll, bis der Anker nicht mehr im Sichtbereich ist:
#tooltip {
position: fixed;
position-anchor: --anchor-top-anchor;
position-visibility: anchors-visible;
bottom: anchor(top);
}
<ph type="x-smartling-placeholder">position-visibility: anchors-visible
DemoAlternativ können Sie position-visibility: no-overflow
verwenden, um zu verhindern, dass der Anker über den Container hinausgeht.
#tooltip {
position: absolute;
position-anchor: --anchor-top-anchor;
position-visibility: no-overflow;
bottom: anchor(top);
}
<ph type="x-smartling-placeholder">position-visibility: no-overflow
DemoFunktionserkennung und Polyfilling
Da die Browserunterstützung derzeit begrenzt ist, möchten Sie diese API wahrscheinlich mit einigen Vorsichtsmaßnahmen verwenden. Zuerst können Sie mit der Feature-Abfrage @supports
direkt in CSS nach Unterstützung suchen. Dazu fassen Sie Ihre Ankerstile wie folgt zusammen:
@supports (anchor-name: --myanchor) {
/* Anchor styles here */
}
Außerdem können Sie die Funktion für die Ankerpositionierung mit dem CSS-Ankerpositionierungs-Polyfill von Oddbird verwenden, das in Firefox 54, Chrome 51, Edge 79 und Safari 10 verfügbar ist. Dieser Polyfill unterstützt die meisten grundlegenden Ankerpositionsmerkmale. Die aktuelle Implementierung ist jedoch noch nicht vollständig und enthält eine veraltete Syntax. Sie können den Link „unpkg“ verwenden oder direkt in einen Paketmanager importieren.
Hinweis zur Barrierefreiheit
Mit der Anchor Positioning API kann zwar ein Element relativ zu anderen positioniert werden, es entsteht jedoch keine sinnvolle semantische Beziehung zwischen ihnen. Wenn eine semantische Beziehung zwischen dem Ankerelement und dem positionierten Element besteht (z. B. ist das positionierte Element ein Kommentar in der Seitenleiste zum Ankertext), können Sie aria-details
verwenden, um vom Ankerelement auf die positionierten Elemente zu verweisen. Screenreader-Software lernt noch, wie mit Aria-Details umgegangen wird, aber der Support verbessert sich.
<div class="anchor" aria-details="sidebar-comment">Main content</div>
<div class="positioned" id="sidebar-comment">Sidebar content</div>
.anchor {
anchor-name: --anchor;
}
.positioned {
position: fixed;
position-anchor: --anchor;
}
Wenn Sie die Ankerpositionierung mit dem Attribut popover
oder mit einem <dialog>
-Element verwenden, übernimmt der Browser die Korrekturen der Fokusnavigation für eine optimale Barrierefreiheit. Ihre Popovers oder Dialogfelder müssen also nicht in der DOM-Reihenfolge vorliegen. Weitere Informationen finden Sie in der Spezifikation zur Barrierefreiheit.
Fazit
Dies ist eine brandneue Funktion und wir sind gespannt, was Sie damit entwickeln. Bisher haben wir einige wirklich nette Anwendungsfälle aus der Community gesehen, wie dynamische Labels in Diagrammen, Verbindungslinien, Fußnoten und visuelle Querverweise. Während Sie mit der Positionierung von Ankergeräten experimentieren, würden wir uns über Ihr Feedback freuen. Wenn Sie Fehler finden, kontaktieren Sie uns.