Die CSS Anchor Positioning API ist ein entscheidender Faktor in der Webentwicklung, da Sie mit ihr Elemente nativ relativ zu anderen Elementen positionieren können. Diese werden als Anker bezeichnet. Diese API vereinfacht komplexe Layoutanforderungen für viele Funktionen der Benutzeroberfläche wie Menüs und Untermenüs, Kurzinfos, Auswahlelemente, Labels, Karten, Dialogfelder mit Einstellungen und vieles mehr. Mit der im Browser integrierten Ankerpositionierung können Sie mehrschichtige Benutzeroberflächen erstellen, ohne auf Bibliotheken von Drittanbietern zurückgreifen zu müssen. Das eröffnet Ihnen eine Welt voller kreativer Möglichkeiten.
Die Ankerpositionierung ist ab Chrome 125 verfügbar.
Kernkonzepte: Anker und positionierte Elemente
Das Herzstück dieser API ist die Beziehung zwischen Ankern und positionierten Elementen. Ein Anker ist ein Element, das mithilfe der Eigenschaft anchor-name
als Referenzpunkt bezeichnet wird. Ein positioniertes Element ist ein Element, das mithilfe der position-anchor
-Eigenschaft oder explizit mit anchor-name
in seiner Positionierungslogik relativ zu einem Anker platziert wird.
Anker einrichten
Das Erstellen von Ankern ist ganz einfach. Wenden Sie die Eigenschaft "anchor-name" auf das ausgewählte Element an und weisen Sie ihm eine eindeutige ID zu. Diese eindeutige Kennung muss ähnlich wie bei einer CSS-Variable mit einem doppelten Bindestrich vorangestellt werden.
.anchor-button {
anchor-name: --anchor-el;
}
Nachdem ein Ankername zugewiesen wurde, dient .anchor-button
als Anker, der als Orientierungshilfe für die Platzierung anderer Elemente dient. Es gibt zwei Möglichkeiten, diesen Anker mit anderen Elementen zu verbinden:
Implizite Anker
Wie im folgenden Codebeispiel können Sie einen Anker zuerst mit einem impliziten Anker mit einem anderen Element verbinden. Die Eigenschaft position-anchor
wird dem Element hinzugefügt, das Sie mit dem Anker verbinden möchten, und 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 mit der anchor()
-Funktion positionieren, ohne den Ankernamen explizit beim ersten Argument anzugeben.
.positioned-notice {
position-anchor: --anchor-el;
top: anchor(bottom);
}
Explizite Anker
Alternativ können Sie den Anchor-Namen direkt in der Anchor-Funktion verwenden (z. B. top: anchor(--anchor-el bottom
). Dies wird als expliziter Anker bezeichnet und kann praktisch sein, wenn Sie mit mehreren Elementen verankern möchten (siehe Beispiel).
.positioned-notice {
top: anchor(--anchor-el bottom);
}
Elemente relativ zu Ankern positionieren
Die Ankerpositionierung baut auf der absoluten CSS-Positionierung auf. Um Positionierungswerte zu verwenden, müssen Sie Ihrem positionierten Element position: absolute
hinzufügen. Verwenden Sie dann die Funktion anchor()
, um Positionierungswerte anzuwenden. Wenn Sie beispielsweise ein verankertes Element oben links am Ankerelement 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);
}
Jetzt ist ein Element mit einem anderen verankert:
Um die logische Positionierung für diese Werte zu verwenden, sehen Sie 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 das Ankerelement leichter relativ zu seinem Anker zentriert werden kann, gibt es einen neuen Wert namens anchor-center
, der mit den Attributen 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 auf 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;
}
Mehrere Anker
Elemente können an mehr als einen Anker gebunden sein. Das bedeutet, dass Sie möglicherweise Positionswerte festlegen müssen, die relativ zu mehr als einem Anker positioniert sind. Dazu verwenden Sie die Funktion anchor()
und geben im ersten Argument explizit an, auf welchen Anker Sie verweisen. Im folgenden Beispiel ist die linke obere Ecke eines positionierten Elements unten rechts bei einem Anker verankert und der untere rechte Teil des positionierten Elements oben links beim zweiten Anker:
.anchored {
position: absolute;
top: anchor(--one bottom);
left: anchor(--one right);
right: anchor(--two left);
bottom: anchor(--two top);
}
Position mit inset-area
Zusätzlich zur standardmäßigen Richtungspositionierung von der absoluten Positionierung enthält das Anchoring-API einen neuen Layoutmechanismus, den „Einsatzbereich“.
Einfügungsbereich erleichtert das Platzieren der verankerten Elemente relativ zu den jeweiligen Ankern. Sie funktioniert bei einem 9-Zellen-Raster, bei dem sich das Verankerungselement in der Mitte befindet.
Verschiedene mögliche Positionierungsoptionen für den Randbereich, dargestellt im Raster mit 9 Zellen
Wenn Sie statt einer absoluten Positionierung einen Nebenbereich verwenden möchten, verwenden Sie die Eigenschaft 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
Mit dem folgenden Tool können Sie diese Positionen näher untersuchen:
Größe von Elementen mit anchor-size()
festlegen
Die Funktion anchor-size()
, die ebenfalls Teil der Anchor Positioning API ist, kann verwendet werden, um ein Element auf Grundlage der Größe des Ankerelements (Breite, Höhe oder Inline- und Blockgrößen) zu vergrößern oder zu positionieren.
Der folgende CSS-Code zeigt ein Beispiel dafür, wie dies für die Höhe verwendet werden kann. 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);
}
Anker für Elemente der obersten Ebene wie Pop-over und Dialoge verwenden
Die Ankerpositionierung funktioniert bei Elementen der obersten Ebene wie popover
sehr gut. und <dialog>
. Während diese Elemente in einer anderen Ebene als der Rest der DOM-Unterstruktur platziert werden, können Sie sie mithilfe von Ankerpositionen wieder aneinander binden und an Elementen, die sich nicht in der obersten Ebene befinden, mit ihnen scrollen. Dies ist ein großer Gewinn für mehrschichtige Benutzeroberflächen.
Im folgenden Beispiel wird eine Reihe von Kurzinfo-Pop-overs über eine Schaltfläche geöffnet. 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 Beispiel sind anchor-name
und position-anchor
Inlinestile für die Schaltfläche und die Kurzinfo. Da jeder Anker einen eindeutigen Ankernamen benötigt, ist das Inline-Objekt die einfachste Methode, um dynamischen Inhalt zu generieren.
Ankerpositionen mit @position-try
anpassen
Sobald Sie die Anfangsposition des Ankers festgelegt haben, können Sie die Position anpassen, wenn der Anker die Ränder des zugehörigen Blocks erreicht. Um alternative Ankerpositionen zu erstellen, 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. Die Anchor Positioning API und das Popover-Attribut eignen sich gut für Menüs und Untermenüs, da diese Menüs in der Regel mit einer Triggerschaltfläche verknüpft sind.
Wenn horizontal nicht genügend Platz in diesem Untermenü verfügbar ist, können Sie es unter das Menü verschieben. Richten Sie dazu zunächst die Anfangsposition ein:
#submenu {
position: absolute;
position-anchor: --submenu;
/* initial position */
margin-left: var(--padding);
inset-area: right span-bottom;
}
Richten Sie dann die verankerten Positionen für das Fallback mit @position-try
ein:
/* alternate position */
@position-try --bottom {
margin: var(--padding) 0 0 var(--padding);
inset-area: bottom;
}
Verbinden Sie die beiden abschließend mit position-try-options
. Das Ganze sieht dann 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;
}
Keywords zum automatischen Umdrehen der Ankerposition
Bei einer einfachen Anpassung, z. B. von oben nach unten oder von links nach rechts (oder beides), können Sie sogar den Schritt zum Erstellen benutzerdefinierter @position-try
-Deklarationen überspringen und die integrierten browsergestützten Flip-Keywords wie flip-block
und flip-inline
verwenden. Sie dienen als Ersatz 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 Zeilen 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;
}
position-visibility
für Anker in Subscrollern
Es gibt einige Fälle, in denen Sie ein Element in einem Subscroller-Bereich 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 sie? Mit dieser Funktion können Sie diese Optionen steuern. Verwenden Sie position-visibility: anchors-visible
, wenn das positionierte Element sichtbar bleiben soll, bis der Anker nicht mehr zu sehen ist:
#tooltip {
position: fixed;
position-anchor: --anchor-top-anchor;
position-visibility: anchors-visible;
bottom: anchor(top);
}
Alternativ können Sie position-visibility: no-overflow
verwenden, um zu verhindern, dass der Anker seinen Container überläuft.
#tooltip {
position: absolute;
position-anchor: --anchor-top-anchor;
position-visibility: no-overflow;
bottom: anchor(top);
}
Funktionserkennung und Polyfilling
Da Browser derzeit nur eingeschränkt unterstützt werden, sollten Sie dieses API mit einigen Vorsichtsmaßnahmen verwenden. Zuerst können Sie direkt in CSS mit der Funktionsabfrage @supports
nach Unterstützung suchen. Dazu müssen Sie Ihre Ankerstile so umbrechen:
@supports (anchor-name: --myanchor) {
/* Anchor styles here */
}
Außerdem können Sie die Funktion zur Ankerpositionierung mit der CSS-Polyfill-Funktion zur Ankerpositionierung von Oddbird Polyfill für die Funktion in Firefox 54, Chrome 51, Edge 79 und Safari 10 verwenden. Dieses Polyfill unterstützt die meisten grundlegenden Funktionen für Ankerpositionen, auch wenn die aktuelle Implementierung nicht vollständig ist und eine veraltete Syntax enthält. Sie können den „unpkg“-Link verwenden oder ihn direkt in einen Paketmanager importieren.
Hinweis zur Barrierefreiheit
Die Anchor Positioning API ermöglicht zwar die Positionierung eines Elements relativ zu anderen Elementen, stellt jedoch keine grundsätzliche semantische Beziehung zwischen den Elementen her. Wenn eine semantische Beziehung zwischen dem Ankerelement und dem positionierten Element besteht (z. B. ein Kommentar in der Seitenleiste zum Ankertext), können Sie aria-details
verwenden, um vom Ankerelement auf das positionierte Element zu verweisen. Screenreader-Software lernt noch, wie mit Aria-Details umgegangen wird, aber der Support wird immer besser.
<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, nimmt der Browser die Korrekturen der Fokusnavigation für eine korrekte Zugänglichkeit vor. Sie müssen also keine Pop-over oder Dialogfelder in der DOM-Reihenfolge haben. Weitere Informationen finden Sie im Hinweis zur Barrierefreiheit in der Spezifikation.
Fazit
Dies ist eine brandneue Funktion und wir sind auf Ihre Entwicklung gespannt. Bisher haben wir einige sehr interessante Anwendungsfälle aus der Community gesehen, z. B. dynamische Labels in Diagrammen, Verbindungslinien, Fußnoten und visuelle Querverweise. Wir freuen uns auf dein Feedback, während du die Ankerpositionierung testest. Wir freuen uns auf dein Feedback. Wenn du Fehler findest, lass es uns bitte wissen.