`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.

Die anchor-name-Eigenschaft von CSS ermöglicht es, ein Element als Anker-Element 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

css

/* 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

none: Der Standardwert. Wenn anchor-name: none auf ein Element gesetzt wird, bedeutet das, dass es nicht als Anker-Element definiert ist. Wenn das Element zuvor als Anker definiert wurde und mit einem positionierten Element verknüpft war, trennt anchor-name: none die beiden.
<dashed-ident>: Ein oder mehrere durch Kommas getrennte beliebige benutzerdefinierte Bezeichner, 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 Anker-Element zu positionieren, benötigt das positionierte Element drei Merkmale: eine Assoziation, eine Position und einen Standort. Die anchor-name- und position-anchor-Eigenschaften bieten eine explizite Verbindung.

Das Anker-Element akzeptiert einen oder mehrere <dashed-ident>-Ankernamen, die über die anchor-name-Eigenschaft gesetzt werden. Wenn einer dieser Namen dann als Wert der position-anchor-Eigenschaft eines Elements gesetzt wird, dessen position auf absolute oder fixed eingestellt ist, werden die beiden Elemente verknüpft. Die beiden Elemente werden durch das Setzen eines Standorts am assoziierten Element relativ zum Anker gebunden, wodurch es zu einem "ankerpositionierten" Element wird.

Wenn mehrere Anker-Elemente denselben Ankernamen aufweisen und dieser Name als Wert der position-anchor-Eigenschaft eines positionierten Elements referenziert wird, wird dieses positionierte Element mit dem letzten Anker-Element in der Quellreihenfolge mit diesem Ankernamen verknüpft.

Ankerpositionierung ändert den Enthaltenden Block der ankerpositionierten Elemente, wodurch seine position relativ zu seinem Anker statt zum nächsten positionierten Vorfahrelement wird.

Um ein positioniertes Element an einer bestimmten Stelle relativ zu einem Anker-Element zu binden und zu platzieren, wird eine Ankerpositionierungsfunktion benötigt, wie die anchor()-Funktion (gesetzt innerhalb eines inset property's Wertes) oder die position-area-Eigenschaft.

Sie können ein positioniertes Element nicht mit einem Anker-Element verknüpfen, wenn der Anker versteckt ist, zum Beispiel mit display: none oder visibility: hidden, oder wenn der Anker Teil der übersprungenen Inhalte eines anderen Elements ist, weil es content-visibility: hidden darauf gesetzt hat.

Die anchor-name-Eigenschaft wird auf allen Elementen unterstützt, die eine Hauptbox erzeugen. Dies bedeutet, dass Pseudo-Elemente, einschließlich von mit ::before und ::after erzeugtem Inhalt, und UI-Funktionen wie der range input Schieberegler (::-webkit-slider-thumb) Anker-Elemente sein können. Pseudo-Elemente sind implizit mit demselben Element verankert wie das Ursprungselement des Pseudo-Elements, es sei denn, es wird anders angegeben.

Für weitere Informationen zu Ankerfunktionen und ihrer Verwendung, siehe das CSS-Ankerpositionierungs-Modul und den Verwendung von CSS-Ankerpositionierung-Leitfaden.

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 Verwendung

Dieses Beispiel verbindet ein positioniertes Element mit einem Anker und positioniert das Element rechts vom Anker.

HTML

Wir spezifizieren zwei <div>-Elemente; ein Anker-Element mit einer Klasse von anchor und ein positioniertes Element mit einer Klasse von infobox.

Wir fügen auch etwas Textfüller um die beiden <div>-Elemente hinzu, um den <body> höher zu machen, sodass er rollt.

html

<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 Anker-Element, indem wir einen Ankernamen darauf setzen über die anchor-name-Eigenschaft:

body {
  width: 50%;
  margin: 0 auto;
}

.anchor {
  font-size: 1.8rem;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: hsl(240 100% 75%);
  width: fit-content;
  border-radius: 10px;
  border: 1px solid black;
  padding: 3px;
}

css

.anchor {
  anchor-name: --my-anchor;
}

Wir assoziieren das zweite <div> mit dem Anker-Element, indem wir seinen Ankernamen als den Wert der position-anchor-Eigenschaft des positionierten Elements festlegen. Wir setzen dann das positionierte Element's:

position-Eigenschaft auf fixed, um es in ein ankerpositioniertes Element zu konvertieren, so dass es relativ zur Position des Ankers auf der Seite positioniert werden kann.
left und top-Eigenschaften auf anchor()-Funktionen mit Werten von right und top respektive. Dies positioniert die linke Kante der Infobox bündig zur rechten Kante ihres Ankers und die obere Kante relativ zur oberen Kante ihres Ankers.
margin-left auf 10px, um Platz zwischen dem ankerpositionierten Element und seinem Anker zu schaffen.

.infobox {
  color: darkblue;
  background-color: azure;
  border: 1px solid #dddddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 1rem;
}

css

.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. Wenn 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 verbinden können.

HTML

Das HTML ist das gleiche wie im vorherigen Beispiel, außer dass wir dieses Mal mehrere positionierte <div>-Elemente mit verschiedenen ids haben, um sie zu identifizieren.

html

<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 Anker-Element mit Hilfe der anchor-name-Eigenschaft und geben ihm einen Ankernamen wie zuvor.

body {
  width: 50%;
  margin: 0 auto;
}

.anchor {
  font-size: 1.8rem;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: hsl(240 100% 75%);
  width: fit-content;
  border-radius: 10px;
  border: 1px solid black;
  padding: 3px;
}

css

.anchor {
  anchor-name: --my-anchor;
}

Jedes der beiden positionierten Elemente wird mit dem Anker-Element assoziiert, indem sein Ankername als Wert der position-anchor-Eigenschaft des positionierten Elements gesetzt wird. Beide erhalten auch eine fixed-Positionierung, was sie zu ankerpositionierten Elementen macht. Die positionierten Elemente werden dann an verschiedenen Stellen relativ zum Anker positioniert, unter Verwendung einer Kombination von inset-Eigenschaften wie oben gezeigt und align-self / justify-self-Eigenschaften mit einem Wert von anchor-center, wodurch die Infobox im Inline/Block-Richtung mittig am Anker ausgerichtet wird.

.infobox {
  color: darkblue;
  background-color: azure;
  border: 1px solid #dddddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 1rem;
}

css

.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 Anker-Element mehr als einen Ankernamen haben kann.

HTML

Das HTML ist das gleiche wie im vorherigen Beispiel.

<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

Das CSS ist ebenfalls das gleiche wie im vorherigen Beispiel, außer dass wir zwei durch Kommas getrennte Namen im Wert der anchor-name-Eigenschaft des Ziels einschließen und jedes positionierte Element einen anderen Wert für position-anchor hat.

body {
  width: 50%;
  margin: 0 auto;
}

.anchor {
  font-size: 1.8rem;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: hsl(240 100% 75%);
  width: fit-content;
  border-radius: 10px;
  border: 1px solid black;
  padding: 3px;
}

.infobox {
  color: darkblue;
  background-color: azure;
  border: 1px solid #dddddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 1rem;
}

css

.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;
}