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
/* 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 vonanchor-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
Anfangswert | none |
---|---|
Anwendbar auf | All elements that generate a principal box |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
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.
<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:
.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
auffixed
, wodurch es zu einem Anker-positionierten Element wird, damit es relativ zur Position des Ankers auf der Seite positioniert werden kann.left
undtop
aufanchor()
-Funktionen mit den Wertenright
undtop
. 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
auf10px
, wodurch ein Abstand zwischen dem Anker-positionierten Element und seinem Anker entsteht.
.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 id
s hinzugefügt 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: --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.
.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.
.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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
anchor-name | ||||||||||||
none |
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
position-anchor
- HTML-Attribut
anchor
- CSS anchor positioning-Modul
- Using CSS anchor positioning-Leitfaden