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 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 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 der CSS-Ankerpositionierung positioniert werden.

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

Beispiele

Grundlegende Verwendung 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 neben dem Anker zu verankern.

HTML

Wir erstellen ein <div>-Element mit einer id von example-anchor. Dies ist unser Ankerelement. Dann fügen wir ein weiteres <div> mit dem anchor-Attribut hinzu, das auf example-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.

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

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 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, um es in ein positioniertes Element zu verwandeln, sodass es relativ zur Position des Ankers positioniert werden kann.
left-Eigenschaft auf eine anchor()-Funktion mit einem Wert von right. Dies verankert das positionierte Element an seinem Anker und positioniert seine linke Kante bündig zur rechten Kante des Ankers.
align-self-Eigenschaft auf anchor-center. Dies sorgt dafür, dass die Infobox im Inline-Bereich zentral zum Mittelpunkt des Ankers ausgerichtet ist.
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 durch das Beispiel, um zu sehen, wie die Infobox an den Anker gekettet ist. Wenn das anchor-Attribut unterstützt wird, bleibt die Infobox rechts vom Anker fixiert. Wenn nicht unterstützt, bleibt die Infobox am Ansichtsfenster fixiert.

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

HTML anchor globales Attribut

Beispiele

Grundlegende Verwendung des `anchor`-Attributs

HTML

CSS

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN

HTML anchor globales Attribut

Beispiele

Grundlegende Verwendung des anchor-Attributs

HTML

CSS

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN

Grundlegende Verwendung des `anchor`-Attributs