anchor-name

Limited availability

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

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 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. Das Setzen von anchor-name: none auf einem Element bedeutet, dass es nicht als Ankerelement definiert ist. Wenn das Element zuvor als Anker definiert und mit einem positionierten Element verbunden war, wird durch das Setzen von anchor-name: none die Verbindung zwischen beiden aufgehoben.
<dashed-ident>: Ein oder mehrere durch Kommas getrennte, benutzerdefinierte Bezeichner, die den oder die Namen des Ankers definieren und 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 Funktionen: eine Verbindung, eine Position und einen Standort. Die Eigenschaften anchor-name und position-anchor bieten eine explizite Verbindung.

Das Ankerelement akzeptiert einen oder mehrere <dashed-ident> Ankernamen, die über die Eigenschaft anchor-name daran 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, werden die beiden Elemente verbunden. Diese beiden Elemente werden durch das Setzen eines Standorts auf das verbundene Element relativ zum Anker miteinander verankert, wodurch es zu einem "anchor-positioned"-Element wird.

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

Die Anker-Positionierung ändert den enthältenden Block von verankerten Elementen, sodass seine position relativ zu seinem Anker statt zum nächstgelegenen positionierten Vorfahren-Element ist.

Um ein positioniertes Element an einem bestimmten Ort relativ zu einem Ankerelement zu verankern und zu platzieren, ist eine Ankerpositionierung erforderlich, wie zum Beispiel die anchor() Funktion (gesetzt im Wert einer Inset-Eigenschaft) oder die position-area Eigenschaft.

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

Die anchor-name Eigenschaft wird auf allen Elementen unterstützt, die eine Hauptbox erzeugen. Das bedeutet, dass Pseudoelemente, einschließlich generierter Inhalte, die mit ::before und ::after erzeugt wurden, und UI-Eigenschaften wie der Thumb des range input (::-webkit-slider-thumb) Ankerelemente sein können. Pseudoelemente sind implizit an dasselbe Element verankert wie das Ursprungselement des Pseudoelements, es sei denn, es ist anderweitig spezifiziert.

Weitere Informationen zu Ankerfunktionen und -verwendung finden Sie auf der CSS-Ankerpositionierungs Modulseite und im Anwenden von CSS-Ankerpositionierung Leitfaden.

Formelle Definition

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

Formelle 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 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> zu vergrößern, sodass er gescrollt werden 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

Zuerst deklarieren wir das anchor <div> als Ankerelement, indem wir mit der Eigenschaft anchor-name einen Ankernamen darauf 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: --my-anchor;
}

Wir verbinden das zweite <div> mit dem Ankerelement, indem wir dessen Ankernamen als Wert der position-anchor Eigenschaft des positionierten Elements setzen. Dann setzen wir das positionierte Element auf:

Die position Eigenschaft auf fixed, wodurch es zu einem verankerten Element wird, damit es relativ zur Position des Ankers auf der Seite positioniert werden kann.
Die left und top Eigenschaften auf anchor() Funktionen mit den Werten right und top entsprechend. Dadurch wird die linke Kante des Infoboxes bündig mit der rechten Kante ihres Ankers und ihre obere Kante relativ zur oberen Kante ihres Ankers positioniert.
margin-left auf 10px, wodurch Abstand zwischen dem verankerten Element und seinem Anker entsteht.

.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 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 Element <div>s mit unterschiedlichen 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 Ankerelement mit der anchor-name Eigenschaft und geben ihm wie zuvor einen Ankernamen.

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 Ankerelement verbunden, indem sein Ankername als Wert der position-anchor Eigenschaft des positionierten Elements gesetzt wird. Beide werden auch mit fixed Positionierung versehen, wodurch sie zu verankerten Elementen werden. Die positionierten Elemente werden dann an verschiedenen Stellen relativ zum Anker positioniert, indem eine Kombination aus Inset-Eigenschaften wie oben gezeigt und align-self / justify-self Eigenschaften mit einem Wert von anchor-center verwendet wird, um die Infobox zentral zu dem Anker im Inline/Block-Richtungen zu übermitteln.

.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 demonstriert, 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 ein Komma getrennte Namen im anchor-name-Eigenschaftswert 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;
}

Ergebnis

Scrollen Sie die Seite, um zu sehen, wie beide Infoboxen an den Anker gebunden sind.

Spezifikationen

Specification
CSS Anchor Positioning # name

Browser-Kompatibilität

Siehe auch

position-anchor
HTML anchor Attribut
CSS-Ankerpositionierungs Modul
Anwenden von CSS-Ankerpositionierung Leitfaden

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden