anchor-name CSS property
Baseline
2026
*
Neu verfügbar
Seit January 2026 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
Want more browser support for this feature? Tell us why.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
Die anchor-name CSS-Eigenschaft ermöglicht es, ein Element als Ankerelement zu definieren, indem ihm ein oder mehrere identifizierende Ankernamen zugewiesen werden. Jeder Name kann dann als Wert der position-anchor-Eigenschaft eines positionierten Elements gesetzt werden, um es mit dem Anker zu verknüpfen.
Syntax
/* Single values */
anchor-name: none;
anchor-name: --name;
/* Multiple values */
anchor-name: --name, --another-name;
/* Global values */
anchor-name: inherit;
anchor-name: initial;
anchor-name: revert;
anchor-name: revert-layer;
anchor-name: unset;
Werte
Diese Eigenschaft wird als <dashed-ident> oder das Schlüsselwort none spezifiziert:
none-
Der Standardwert. Das Setzen von
anchor-name: noneauf einem Element bedeutet, dass es nicht als Ankerelement definiert ist. Wenn das Element zuvor als Anker definiert und mit einem positionierten Element verknüpft war, hebt das Setzen vonanchor-name: nonedie Verknüpfung auf. <dashed-ident>-
Ein oder mehrere durch Kommas getrennte beliebige benutzerdefinierte Kennungen, die den Namen oder die Namen des Ankers definieren, die dann in einer
position-anchor-Eigenschaft referenziert werden können.
Beschreibung
Um ein Element relativ zu einem Ankerelement zu positionieren, benötigt das positionierte Element drei Merkmale: eine Verknüpfung, eine Position und einen Ort. Die Eigenschaften anchor-name und position-anchor bieten eine explizite Verknüpfung.
Das Ankerelement akzeptiert einen oder mehrere <dashed-ident> Ankernamen, die über die Eigenschaft anchor-name darauf gesetzt werden. Wenn einer dieser Namen dann als Wert der Eigenschaft position-anchor eines Elements gesetzt wird, dessen position auf absolute oder fixed gesetzt ist, sind die beiden Elemente verknüpft. Die beiden Elemente werden durch das Setzen eines Ortes auf das verknüpfte Element relativ zum Anker miteinander verbunden, wodurch es zu einem "anker-positionierten" Element wird.
Wenn mehrere Ankerelemente denselben Ankernamen auf sich gesetzt haben und dieser Name durch den Wert der position-anchor-Eigenschaft eines positionierten Elements referenziert wird, wird das positionierte Element mit dem letzten Ankerelement mit diesem Ankernamen in der Quellreihenfolge verknüpft.
Die Ankerpositionierung ändert den enthältenden Block von anker-positionierten Elementen, sodass seine position relativ zu seinem Anker anstatt zum nächstgelegenen positionierten Vorfahr-Element wird.
Um ein positioniertes Element relativ zu einem Ankerelement an einem bestimmten Ort zu verbinden und zu platzieren, ist eine Ankerpositionierungsfunktion erforderlich, wie die anchor()-Funktion (innerhalb eines Inset-Eigenschaftswerts gesetzt) oder die position-area-Eigenschaft.
Sie können ein positioniertes Element nicht mit einem Ankerelement verknüpfen, wenn der Anker ausgeblendet ist, wie mit display: none oder visibility: hidden, oder wenn der Anker Teil der übersprungenen Inhalte eines anderen Elements ist, weil darauf content-visibility: hidden gesetzt ist.
Die Eigenschaft anchor-name wird bei allen Elementen unterstützt, die eine Hauptbox erzeugen. Das bedeutet, dass Pseudoelemente, einschließlich generierter Inhalte, die mit ::before und ::after erstellt wurden, und Benutzeroberflächenfunktionen wie der range input Schieberegler (::-webkit-slider-thumb) Ankerelemente sein können. Pseudoelemente sind implizit an dasselbe Element verankert wie das Pseudoelement des Ursprungelements, sofern nicht anders angegeben.
Für mehr Informationen zu Ankerfunktionen und deren Verwendung, siehe das Modul CSS-Ankerpositionierung und den Leitfaden zur Verwendung von CSS-Ankerpositionierung.
Formale Definition
| Anfangswert | none |
|---|---|
| Anwendbar auf | All elements that generate a principal box |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
anchor-name =
none |
<anchor-name>#
<anchor-name> =
<dashed-ident>
Beispiele
Grundlegende Nutzung
Dieses Beispiel verbindet ein positioniertes Element mit einem Anker und positioniert das Element rechts vom Anker.
HTML
Wir spezifizieren zwei <div>-Elemente; ein Ankerelement mit der Klasse anchor und ein positioniertes Element mit der Klasse infobox.
Wir fügen auch etwas Fülltext um die beiden <div>-Elemente hinzu, um den <body> höher zu machen, damit er scrollt.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Dui nunc mattis enim ut tellus
elementum sagittis vitae et.
</p>
<div class="anchor">⚓︎</div>
<div class="infobox">
<p>This is an information box.</p>
</div>
<p>
Nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. In arcu
cursus euismod quis viverra nibh cras pulvinar. Vulputate ut pharetra sit amet
aliquam.
</p>
<p>
Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Vel elit
scelerisque mauris pellentesque pulvinar pellentesque habitant morbi
tristique. Porta lorem mollis aliquam ut porttitor. Turpis cursus in hac
habitasse platea dictumst quisque. Dolor sit amet consectetur adipiscing elit.
Ornare lectus sit amet est placerat. Nulla aliquet porttitor lacus luctus
accumsan.
</p>
CSS
Zuerst deklarieren wir das anchor <div> als Ankerelement, indem wir einen Ankernamen über die Eigenschaft anchor-name darauf setzen:
.anchor {
anchor-name: --my-anchor;
}
Wir verknüpfen das zweite <div> mit dem Ankerelement, indem wir seinen Ankernamen als Wert der position-anchor-Eigenschaft des positionierten Elements setzen. Anschließend setzen wir das positionierte Element:
- Die Eigenschaft
positionauffixed, wodurch es zu einem anker-positionierten Element wird, das relativ zur Position des Ankers auf der Seite positioniert werden kann. - Die Eigenschaften
leftundtopzuanchor()-Funktionen mit den Wertenrightundtopjeweils. Dies positioniert die linke Kante der Infobox bündig zur rechten Kante ihres Ankers und ihre obere Kante relativ zur oberen Kante ihres Ankers. margin-leftauf10px, wodurch ein Abstand zwischen dem anker-positionierten Element und seinem Anker entsteht.
.infobox {
position-anchor: --my-anchor;
position: fixed;
left: anchor(right);
top: anchor(top);
margin-left: 10px;
}
Ergebnis
Scrollen Sie die Seite, um zu sehen, wie die Infobox relativ zum Anker positioniert ist. Während der Anker nach oben scrollt, bewegt sich das positionierte Element mit.
Mehrere positionierte Elemente
Dieses Beispiel zeigt, wie Sie mehrere positionierte Elemente mit einem Anker verknüpfen können.
HTML
Das HTML ist dasselbe wie beim vorherigen Beispiel, außer dass wir nun mehrere positionierte <div>-Elemente mit verschiedenen ids haben, um sie zu identifizieren.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Dui nunc mattis enim ut tellus
elementum sagittis vitae et.
</p>
<div class="anchor">⚓︎</div>
<div class="infobox" id="infobox1">
<p>This is an information box.</p>
</div>
<div class="infobox" id="infobox2">
<p>This is another information box.</p>
</div>
<p>
Nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. In arcu
cursus euismod quis viverra nibh cras pulvinar. Vulputate ut pharetra sit amet
aliquam.
</p>
<p>
Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Vel elit
scelerisque mauris pellentesque pulvinar pellentesque habitant morbi
tristique. Porta lorem mollis aliquam ut porttitor. Turpis cursus in hac
habitasse platea dictumst quisque. Dolor sit amet consectetur adipiscing elit.
Ornare lectus sit amet est placerat. Nulla aliquet porttitor lacus luctus
accumsan.
</p>
CSS
Wir deklarieren das anchor <div> als Ankerelement mit der Eigenschaft anchor-name und geben ihm wie zuvor einen Ankernamen.
.anchor {
anchor-name: --my-anchor;
}
Jedes der beiden positionierten Elemente wird mit dem Ankerelement durch Setzen seines Ankernamens als Wert der position-anchor-Eigenschaft des positionierten Elements verknüpft. Beide erhalten außerdem eine fixed Positionierung, womit sie anker-positionierte Elemente werden. Die positionierten Elemente werden dann an verschiedenen Positionen relativ zum Anker mit einer Kombination aus Inset-Eigenschaften, wie oben zu sehen, und align-self / justify-self-Eigenschaften mit einem Wert von anchor-center positioniert, wodurch die Infobox zentral in der Inline-/Blockrichtung zum Anker ausgerichtet wird.
.infobox {
position-anchor: --my-anchor;
position: fixed;
}
#infobox1 {
left: anchor(right);
align-self: anchor-center;
margin-left: 10px;
}
#infobox2 {
bottom: anchor(top);
justify-self: anchor-center;
margin-bottom: 15px;
}
Ergebnis
Scrollen Sie die Seite, um zu sehen, wie beide Infoboxen an den Anker gebunden sind.
Mehrere Ankernamen
Dieses Beispiel zeigt, wie ein Ankerelement mehr als einen Ankermannamen haben kann.
HTML
Das HTML ist dasselbe wie beim vorherigen Beispiel.
CSS
Das CSS ist ebenfalls identisch mit dem vorherigen Beispiel, außer dass wir zwei durch Komma getrennte Namen im Wert der anchor-name-Eigenschaft des Zielobjekts einschließen und jedes positionierte Element einen anderen Wert für position-anchor hat.
.anchor {
anchor-name: --anchor1, --anchor2;
}
.infobox {
position: fixed;
}
#infobox1 {
position-anchor: --anchor1;
left: anchor(right);
align-self: anchor-center;
margin-left: 10px;
}
#infobox2 {
position-anchor: --anchor2;
bottom: anchor(top);
justify-self: anchor-center;
margin-bottom: 15px;
}
Ergebnis
Scrollen Sie die Seite, um zu sehen, wie beide Infoboxen an den Anker gebunden sind.
Spezifikationen
| Spezifikation |
|---|
| CSS Anchor Positioning Module Level 1 # name |