anchor-name

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die anchor-name CSS Eigenschaft ermöglicht es, ein Element als Ankerelement zu definieren, indem man ihm einen oder mehrere identifizierende Ankernamen zuweist. 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 Ankerelement definiert ist. Falls das Element zuvor als Anker definiert und mit einem positionierten Element verknüpft war, hebt das Setzen von anchor-name: none die Verknüpfung auf.
<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 Ankerelement zu positionieren, benötigt das positionierte Element drei Merkmale: eine Verbindung, eine Position und einen Ort. Die Eigenschaften anchor-name und position-anchor bieten die Verbindung.

Das Ankerelement akzeptiert einen oder mehrere <dashed-ident> Ankernamen, die über die Eigenschaft anchor-name auf ihm gesetzt werden. Wenn einer dieser Namen dann als Wert der position-anchor Eigenschaft eines Elements gesetzt wird, dessen position auf absolute oder fixed gesetzt ist, sind die beiden Elemente verknüpft. Die beiden Elemente werden durch Festlegen eines Ortes auf dem verknüpften Element relativ zum Anker miteinander verbunden, wodurch es zu einem "ankerpositionierten" Element wird.

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

Ankerpositionierung ändert den enthältenden Block von ankerpositionierten Elementen, wodurch ihre position relativ zu ihrem Anker wird, anstatt zum nächstgelegenen positionierten Vorelement.

Um ein positioniertes Element an einem bestimmten Ort relativ zu einem Ankerelement zu verankern und zu platzieren, ist eine Ankerpositionierungsfunktion erforderlich, wie z.B. die anchor() Funktion (gesetzt innerhalb eines Wertes der inset-Eigenschaft) oder die position-area Eigenschaft.

Sie können ein positioniertes Element nicht mit einem Ankerelement assoziieren, wenn der Anker verborgen ist, beispielsweise mit display: none oder visibility: hidden, oder wenn der Anker Teil der übersprungenen Inhalte eines anderen Elements ist, weil es content-visibility: hidden darauf eingestellt hat.

Die Eigenschaft anchor-name wird auf allen Elementen unterstützt, die eine Hauptbox erzeugen. Das bedeutet, dass Pseudoelemente, einschließlich generierter Inhalte, die mit ::before und ::after erstellt wurden, und UI-Features wie der range input Daumen (::-webkit-slider-thumb) Ankerelemente sein können. Pseudoelemente sind implizit am selben Element wie das Ursprungslement des Pseudoelements verankert, es sei denn, etwas anderes ist angegeben.

Für mehr Informationen zu Ankerfunktionen und -nutzung, siehe das Modul CSS-Ankerpositionierung und den Anleitungsleitfaden für CSS-Ankerpositionierung.

Offizielle Definition

Anfangswert	`none`
Anwendbar auf	All elements that generate a principal box
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Offizielle Syntax

anchor-name = 
  none             |
  <dashed-ident>#

Beispiele

Grundlegende Verwendung

Dieses Beispiel verbindet ein positioniertes Element mit einem Anker, indem es das Element rechts vom Anker positioniert.

HTML

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

Wir fügen auch etwas Fülltext um die beiden <div>s hinzu, um den <body> höher zu machen, damit er scrollt.

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

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: --myAnchor;
}

Wir verknüpfen das zweite <div> mit dem Ankerelement, indem wir seinen Ankernamen als Wert der position-anchor Eigenschaft des positionierten Elements setzen. Dann setzen wir die Eigenschaften des positionierten Elements:

position Eigenschaft auf fixed, wodurch es zu einem ankerpositionierten Element wird, sodass es relativ zur Position des Ankers auf der Seite positioniert werden kann.
left und top Eigenschaften zu anchor() Funktionen mit Werten von right und top jeweils. Dies positioniert die linke Kante der Infobox bündig an der rechten Kante ihres Ankers und ihre obere Kante relativ zur oberen Kante ihres Ankers.
margin-left auf 10px, wodurch Platz zwischen dem ankerpositionierten Element und seinem Anker entsteht.

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

css

.infobox {
  position-anchor: --myAnchor;
  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 ihm.

Mehrere positionierte Elemente

Dieses Beispiel zeigt, wie Sie mehrere positionierte Elemente mit einem Anker verknüpfen können.

HTML

Das HTML ist dasselbe wie im vorherigen Beispiel, außer dass wir diesmal mehrere positionierte Element <div>s mit verschiedenen ids zur Identifizierung haben.

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 Ankerelement, indem wir die anchor-name Eigenschaft verwenden, um ihm einen Ankernamen wie zuvor zu geben.

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: --myAnchor;
}

Jedes der beiden positionierten Elemente ist mit dem Ankerelement durch das Setzen seines Ankernamens als Wert der position-anchor Eigenschaft des positionierten Elements verknüpft. Beide erhalten auch fixed Positionierung, wodurch sie ankerpositionierte Elemente werden. Die positionierten Elemente werden dann an verschiedenen Stellen relativ zum Anker positioniert, indem eine Kombination von Inset-Eigenschaften wie oben gesehen und align-self / justify-self Eigenschaften mit einem Wert von anchor-center verwendet wird, um die Infobox zentral zur Mitte des Ankers in den Inline/Block-Richtungen zu zentrieren.

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

css

.infobox {
  position-anchor: --myAnchor;
  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 am Anker angebracht sind.

Mehrere Ankernamen

Dieses Beispiel zeigt, wie ein Ankerelement mehr als einen Ankernamen haben kann.

HTML

Das HTML ist dasselbe 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 dasselbe wie im vorherigen Beispiel, außer dass wir zwei durch Kommas getrennte Namen im Wert der Eigenschaft anchor-name 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 #ddd;
  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;
}

Ergebnis

Scrollen Sie die Seite, um zu sehen, wie beide Infoboxen am Anker angebracht sind.

Spezifikationen

Specification
CSS Anchor Positioning # name

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

position-anchor
HTML anchor Attribut
CSS-Ankerpositionierung Modul
Anleitungsleitfaden für CSS-Ankerpositionierung Leitfaden