Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
HTML anchor globales Attribut
Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.
Experimentell:Dies ist eineexperimentelle Technologie
Überprüfen Sie dieBrowser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Dasanchorglobale Attribut wird verwendet, um ein positioniertes Element mit einem Ankerelement zu verknüpfen. Der Wert des Attributs ist derid-Wert des Elements, an das Sie das positionierte Element ankern möchten. Das Element kann dann mithilfe derCSS-Ankerpositionierung positioniert werden.
Hinweis:Alternativ können Sie ein positioniertes Element über CSS mit einem Ankerelement verknüpfen, indem Sie dieanchor-name- undposition-anchor-Eigenschaften verwenden. Wenn beide Ankertechniken auf demselben Element angewendet werden, hat die CSS-Technik Vorrang vor der HTML-Technik.
Beispiele
Grundlegende Verwendung desanchor-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 neben dem Anker zu verankern.
HTML
Wir erstellen ein<div>-Element mit einerid vonexample-anchor. Dies ist unser Ankerelement. Dann fügen wir ein weiteres<div> mit demanchor-Attribut hinzu, das aufexample-anchor gesetzt ist. Dies bezeichnet das erste<div> als Anker für das zweite<div>, wodurch die beiden miteinander verbunden werden.
Wir fügen um die beiden<div>s auch etwas Fülltext hinzu, um den<body> so hoch zu machen, dass 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>⚓︎</div><div 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
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;}Wir verwenden CSS, um dasinfobox-Element in einanker-positioniertes Element zu verwandeln und es relativ zu seinem Anker zu positionieren. Wir setzen seine:
position-Eigenschaft auffixed, um es in ein positioniertes Element zu verwandeln, sodass 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 und positioniert seine linke Kante bündig zur rechten Kante des Ankers.align-self-Eigenschaft aufanchor-center. Dies sorgt dafür, dass die Infobox im Inline-Bereich zentral zum Mittelpunkt des Ankers ausgerichtet ist.margin-leftauf10px, um Platz zwischen dem anker-positionierten Element und seinem Anker zu schaffen.
.infobox { position: fixed; left: anchor(right); align-self: anchor-center; margin-left: 10px;}Ergebnis
Scrollen Sie durch das Beispiel, um zu sehen, wie die Infobox an den Anker gekettet ist. Wenn dasanchor-Attribut unterstützt wird, bleibt die Infobox rechts vom Anker fixiert. Wenn nicht unterstützt, bleibt die Infobox am Ansichtsfenster fixiert.
Spezifikationen
Dieses Attribut ist derzeit nicht Teil der HTML-Spezifikation. Lesen Sie die Diskussion über die Hinzufügung desanchor-Attributs unterhttps://github.com/whatwg/html/pull/9144.
Browser-Kompatibilität
Siehe auch
HTMLElement.anchorElement- CSS
anchor-nameEigenschaft - CSS
position-anchorEigenschaft - CSS-Ankerpositionierungs Modul