anchor
Kein Standard: Diese Funktion ist nicht standardisiert und befindet sich nicht im Standardisierungsprozess. Verwenden Sie sie nicht auf Produktionsseiten, die auf das Web ausgerichtet sind: Sie wird nicht für alle Benutzer funktionieren. Außerdem kann es große Inkompatibilitäten zwischen Implementierungen geben und das Verhalten kann sich in Zukunft ändern.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.
Das anchor
-Globale Attribut wird verwendet, um ein positioniertes Element mit einem Ankerelement zu verknüpfen. Der Wert des Attributs ist der id
-Wert des Elements, an das Sie das positionierte Element ankern möchten. Das Element kann dann mithilfe von CSS Anchor Positionierung positioniert werden.
Hinweis: Alternativ können Sie ein positioniertes Element über CSS mit einem Ankerelement verknüpfen, indem Sie die Eigenschaften anchor-name
und position-anchor
verwenden. Wenn beide Techniken auf dasselbe Element angewendet werden, hat die CSS-Technik Vorrang vor der HTML-Technik.
Beispiele
Grundlegende Nutzung des anchor
-Attributs
Im folgenden Beispiel wird HTML verwendet, um ein positioniertes Element mit einem Anker zu verknüpfen. CSS wird dann verwendet, um das positionierte Element rechts vom Anker zu verankern.
HTML
Wir erstellen ein <div>
-Element mit einem id
von example-anchor
. Dies ist unser Ankerelement. Wir fügen dann ein weiteres <div>
mit dem anchor
-Attribut, das auf example-anchor
gesetzt ist, hinzu. Dies bezeichnet das erste <div>
als Anker für das zweite <div>
und verknüpft die beiden miteinander.
Wir fügen auch etwas Fülltext um die beiden <div>
-Elemente hinzu, um den <body>
höher zu machen, damit er scrollt.
<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" id="example-anchor">⚓︎</div>
<div class="infobox" anchor="example-anchor">
<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 verwenden CSS, um das infobox
-Element in ein ankerpositioniertes Element umzuwandeln und es relativ zu seinem Anker zu positionieren. Wir setzen seine:
position
-Eigenschaft auffixed
, um es in ein positioniertes Element umzuwandeln, damit es relativ zur Position des Ankers positioniert werden kann.left
-Eigenschaft auf eineanchor()
-Funktion mit einem Wert vonright
. Dies verankert das positionierte Element an seinem Anker, wodurch seine linke Kante bündig mit der rechten Kante des Ankers positioniert wird.align-self
-Eigenschaft aufanchor-center
. Dadurch wird die Infobox zentral zur Mitte des Ankers in der Inline-Richtung ausgerichtet.margin-left
auf10px
, wodurch Platz zwischen dem ankerpositionierten Element und seinem Anker geschaffen wird.
.infobox {
position: fixed;
left: anchor(right);
align-self: anchor-center;
margin-left: 10px;
}
Ergebnis
Scrollen Sie das Beispiel, um zu sehen, wie die Infobox an den Anker gebunden ist. Wenn das anchor
-Attribut unterstützt wird, wird die Infobox rechts vom Anker fixiert. Wenn es nicht unterstützt wird, wird die Infobox am Ansichtsfenster fixiert.
Spezifikationen
Dieses Attribut ist derzeit nicht Teil der HTML-Spezifikation. Lesen Sie die Diskussion über das Hinzufügen des anchor
-Attributs unter https://github.com/whatwg/html/pull/9144.
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
HTMLElement.anchorElement
- CSS
anchor-name
Eigenschaft - CSS
position-anchor
Eigenschaft - CSS-Anker-Positionierungsmodul
- Anleitung zur Verwendung von CSS-Anker-Positionierung