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 es mit einem oder mehreren identifizierenden Ankernamen versehen wird. Jeder dieser Namen kann dann als Wert der position-anchor
Eigenschaft eines positionierten Elements festgelegt werden, um es mit dem Anker zu verknüpfen.
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 verknüpft war, trenntanchor-name: none
die Verbindung. <dashed-ident>
-
Ein oder mehrere durch Kommas getrennte beliebige benutzerdefinierte Kennungen, 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 Assoziation, eine Position und einen Ort. Die Eigenschaften anchor-name
und position-anchor
bieten eine explizite Assoziation.
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 mit position
auf absolute
oder fixed
gesetzt wird, werden die beiden Elemente assoziiert. Die beiden Elemente werden verbunden, indem ein Ort auf dem assoziierten Element relativ zum Anker festgelegt wird, wodurch es zu einem "anker-positionierten" Element wird.
Wenn mehrere Ankerelemente denselben Ankernamen aufweisen 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 assoziiert.
Die Ankerpositionierung ändert den Enthaltungsblock von anker-positionierten Elementen, sodass ihre position
relativ zu ihrem Anker und nicht relativ zum nächsten positionierten Vorfahren wird.
Um ein positioniertes Element an einem bestimmten Ort relativ zu einem Ankerelement zu befestigen, wird eine Ankerpositionierungsfunktion benötigt, wie die anchor()
Funktion (im Wert einer inset Eigenschaft gesetzt) oder die position-area
Eigenschaft.
Es ist nicht möglich, ein positioniertes Element mit einem Ankerelement zu verknüpfen, wenn der Anker verborgen ist, z.B. mit display: none
oder visibility: hidden
, oder wenn der Anker Teil der übersprungenen Inhalte eines anderen Elements ist, da content-visibility: hidden
darauf gesetzt ist.
Die Eigenschaft anchor-name
wird auf allen Elementen unterstützt, die eine Hauptbox generieren. Dies bedeutet, dass Pseudo-Elemente, einschließlich der mit ::before
und ::after
erstellten generierten Inhalte und UI-Features wie der range
Eingabe Daumen (::-webkit-slider-thumb
) Ankerelemente sein können. Pseudoelemente sind implizit an dasselbe Element verankert wie das Element, von dem das Pseudoelement stammt, sofern nicht anders angegeben.
Weitere Informationen zu Ankerfunktionen und deren Verwendung finden Sie auf der CSS Ankerpositionierung Modulseite und im Anleitung zur Verwendung von CSS Ankerpositionierung.
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 verknüpft ein positioniertes Element mit 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 ein, um den <body>
höher zu machen, sodass er scrollbar wird.
<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 ihm über die Eigenschaft anchor-name
einen Ankernamen zuweisen:
.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 festlegen. Dann setzen wir die Eigenschaften des positionierten Elements:
- Die
position
Eigenschaft auffixed
, wodurch es zu einem anker-positionierten Element konvertiert wird, sodass es relativ zur Position des Ankers auf der Seite positioniert werden kann. - Die
left
undtop
Eigenschaften aufanchor()
Funktionen mit den Wertenright
undtop
entsprechend. 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
auf10px
, wodurch ein Raum 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 assoziieren können.
HTML
Das HTML ist das gleiche wie im vorherigen Beispiel, jedoch haben wir dieses Mal mehrere positionierte Element <div>
s mit unterschiedlichen id
s, 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
, indem wir ihm wie zuvor einen Ankernamen geben.
.anchor {
anchor-name: --myAnchor;
}
Jedes der beiden positionierten Elemente wird mit dem Ankerelement assoziiert, indem wir seinen Ankernamen als Wert der position-anchor
Eigenschaft des positionierten Elements festlegen. Beide haben ebenfalls eine fixed
Platzierung, wodurch sie anker positionierte Elemente werden. Die positionierten Elemente werden dann an verschiedenen Orten 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 in der Inline-/Blockrichtung jeweils zentral zum Anker auszurichten.
.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 mit dem Anker verbunden sind.
Mehrere Ankernamen
Dieses Beispiel zeigt, wie ein Ankerelement mehr als einen Ankernamen haben kann.
HTML
Das HTML ist das gleiche wie im vorherigen Beispiel.
CSS
Das CSS ist auch dasselbe wie im vorherigen Beispiel, außer dass wir zwei durch Kommas getrennte Namen im Wert der anchor-name
Eigenschaft des Ziels einfügen 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 mit dem Anker verbunden sind.
Spezifikationen
Specification |
---|
CSS Anchor Positioning # name |
Browser-Kompatibilität
Siehe auch
position-anchor
- HTML
anchor
Attribut - CSS Ankerpositionierung Modul
- Verwendung von CSS Ankerpositionierung Leitfaden