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-Eigenschaft CSS 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 verbinden.

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 dies, dass es nicht als Ankerelement definiert ist. Falls das Element zuvor als Anker definiert und mit einem positionierten Element verbunden war, trennt die Einstellung von anchor-name: none diese Verbindung.

<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, erfordert das positionierte Element drei Merkmale: eine Verbindung, eine Position und einen Ort. Die Eigenschaften anchor-name und position-anchor stellen die Verbindung her.

Das Ankerelement akzeptiert einen oder mehrere <dashed-ident>-Ankernamen, die über die Eigenschaft anchor-name 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 verbunden. Die beiden Elemente sind durch das Festlegen eines Ortes des assoziierten Elements relativ zum Anker "geankert", wodurch es zu einem "Anker-positionierten" Element wird.

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

Die Anker-Positionierung ändert den Enthält-Block von Anker-positionierten Elementen, wodurch ihre position relativ zu ihrem Anker, statt zum nächsten positionierten Vorfahrenelement, wird.

Um ein positioniertes Element an einem bestimmten Ort relativ zu einem Ankerelement zu verankern und zu platzieren, ist eine Anker-Positionierungsfunktion erforderlich, wie z. B. die anchor()-Funktion (innerhalb eines Werts einer früheren Eigenschaft) oder die Eigenschaft position-area.

Es ist nicht möglich, ein positioniertes Element mit einem Ankerelement zu verbinden, wenn der Anker verborgen ist, z. B. mit display: none oder visibility: hidden, oder wenn der Anker zu den übersprungenen Inhalten eines anderen Elements gehört, weil content-visibility: hidden darauf gesetzt ist.

Die anchor-name-Eigenschaft wird für alle Elemente unterstützt, die eine Hauptbox generieren. Das bedeutet, dass Pseudo-Elemente, einschließlich generierter Inhalte, die mit ::before und ::after erstellt wurden, sowie UI-Funktionen wie der Schieberegler-Thumb eines range-Inputs (::-webkit-slider-thumb), Ankerelemente sein können. Pseudo-Elemente sind implizit an dasselbe Element wie das Ursprungselement des Pseudo-Elements verankert, sofern nicht anders angegeben.

Weitere Informationen zu Ankerfunktionen und deren Verwendung finden Sie auf der Modul-Startseite CSS anchor positioning und im Leitfaden Using CSS anchor positioning.

Formale Definition

Anfangswertnone
Anwendbar aufAll elements that generate a principal box
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

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

Beispiele

Grundlegende Verwendung

Dieses Beispiel verankert ein positioniertes Element an einem Anker und positioniert das Element rechts vom Anker.

HTML

Wir definieren zwei <div>-Elemente: ein Ankerelement mit der Klasse anchor und ein positioniertes Element mit der Klasse infobox.

Wir fügen außerdem etwas Fülltext um die beiden <div>-Elemente hinzu, um den <body> höher zu machen, damit er scrollen kann.

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

Wir deklarieren zuerst das anchor-<div> als Ankerelement, indem wir ihm über die Eigenschaft anchor-name einen Ankernamen zuweisen:

css
.anchor {
  anchor-name: --myAnchor;
}

Wir verbinden das zweite <div> mit dem Ankerelement, indem wir seinen Ankernamen als Wert der position-anchor-Eigenschaft des positionierten Elements festlegen. Anschließend setzen wir die folgenden Eigenschaften für das positionierte Element:

  • position auf fixed, wodurch es zu einem Anker-positionierten Element wird, damit es relativ zur Position des Ankers auf der Seite positioniert werden kann.
  • left und top auf anchor()-Funktionen mit den Werten right und top. Dadurch wird die linke Kante der Infobox bündig zur rechten Kante ihres Ankers und die obere Kante relativ zur oberen Kante ihres Ankers positioniert.
  • margin-left auf 10px, wodurch ein Abstand zwischen dem Anker-positionierten Element und seinem Anker entsteht.
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 verbinden können.

HTML

Das HTML ist das gleiche wie im vorherigen Beispiel, außer dass wir diesmal mehrere positionierte <div>-Elemente mit unterschiedlichen ids hinzugefügt 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 Ankerelement mit der Eigenschaft anchor-name und geben ihm wie zuvor einen Ankernamen.

css
.anchor {
  anchor-name: --myAnchor;
}

Jedes der beiden positionierten Elemente wird dem Ankerelement zugeordnet, indem sein Ankernamenwert als position-anchor-Eigenschaftswert des positionierten Elements gesetzt wird. Beide erhalten auch eine fixed-Positionierung, wodurch sie Anker positionierte Elemente werden. Die positionierten Elemente werden dann an verschiedenen Stellen relativ zum Anker mithilfe einer Kombination aus inset-Eigenschaften und align-self- / justify-self-Eigenschaften mit einem Wert von anchor-center positioniert, wodurch die Infobox zentriert am Anker ausgerichtet wird.

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 an den Anker angebunden sind.

Mehrere Ankernamen

Dieses Beispiel zeigt, wie ein Ankerelement mehrere Ankernamen haben kann.

HTML

Das HTML ist dasselbe wie im vorherigen Beispiel.

CSS

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

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 an den Anker angebunden sind.

Spezifikationen

Specification
CSS Anchor Positioning
# name

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
anchor-name
Experimental
none
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

Siehe auch