HTML-Verankerung als 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 eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Das anchor globale Attribut wird verwendet, um ein positioniertes Element mit einem Anker-Element zu verknüpfen. Der Wert des Attributs ist der id Wert des Elements, an das Sie das positionierte Element verankern möchten. Das Element kann dann mit Hilfe der CSS-Ankerpositionierung positioniert werden.

Hinweis: Alternativ können Sie ein positioniertes Element über CSS mit einem Anker-Element verknüpfen, indem Sie die Eigenschaften anchor-name und position-anchor verwenden. Wenn beide Techniken zur Verankerung auf dasselbe Element angewendet werden, hat die CSS-Technik Vorrang vor der HTML-Technik.

Beispiele

Grundlegende Verwendung des anchor-Attributs

Das folgende Beispiel verwendet HTML, um ein positioniertes Element mit einem Anker zu verknüpfen. CSS wird dann verwendet, um das positionierte Element rechts vom Anker zu befestigen.

HTML

Wir erstellen ein <div>-Element mit einer id von example-anchor. Dies ist unser Anker-Element. Dann fügen wir ein weiteres <div> ein, bei dem das anchor-Attribut auf example-anchor gesetzt ist. Dies bezeichnet das erste <div> als Anker für das zweite <div> und verbindet die beiden miteinander.

Wir fügen auch etwas Fülltext um die beiden <div>-Elemente herum hinzu, um den <body> höher zu machen, damit er scrollen 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" 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 Anker-positioniertes Element zu verwandeln und es relativ zu seinem Anker zu positionieren. Wir setzen seine:

  • position Eigenschaft auf fixed, wodurch es zu einem positionierten Element wird, das relativ zur Position des Ankers positioniert werden kann.
  • left Eigenschaft auf eine anchor() Funktion mit einem Wert von right. Dies befestigt das positionierte Element an seinem Anker und positioniert seine linke Kante bündig an der rechten Kante des Ankers.
  • align-self Eigenschaft auf anchor-center. Dies bewirkt, dass die Infobox zentral zur Mitte des Ankers in Richtung der Inline-Achse ausgerichtet wird.
  • margin-left auf 10px, um Platz zwischen dem Anker-positionierten Element und seinem Anker zu schaffen.
css
.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 nicht unterstützt, wird die Infobox am Viewport fixiert.

Spezifikationen

Dieses Attribut ist derzeit kein Teil der HTML-Spezifikation. Lesen Sie die Diskussion über das Hinzufügen des anchor-Attributes unter https://github.com/whatwg/html/pull/9144.

Browser-Kompatibilität

Siehe auch