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 verbinden. Der Wert des Attributs ist der id-Wert des Elements, an das Sie das positionierte Element ankern möchten. Das Element kann dann mit 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.
anchor-Attributs
Im folgenden Beispiel wird HTML verwendet, um ein positioniertes Element mit einem Anker zu verbinden. CSS wird dann verwendet, um das positionierte Element rechts vom Anker zu verankern.
HTMLWir 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 bestimmt 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 hinzu, um das <body>-Element höher zu machen, damit es 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>
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 ankerpositioniertes Element umzuwandeln und es relativ zu seinem Anker zu positionieren. Wir setzen:
position-Eigenschaft auf fixed, wodurch es in ein positioniertes Element umgewandelt wird, damit es relativ zur Position des Ankers positioniert werden kann.left-Eigenschaft auf eine anchor()-Funktion mit dem Wert 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 bewirkt, dass die Infobox zentriert zur Mitte des Ankers in der Inline-Richtung ausgerichtet wird.margin-left auf 10px, wodurch ein Abstand zwischen dem ankerpositionierten Element und seinem Anker entsteht..infobox {
position: fixed;
left: anchor(right);
align-self: anchor-center;
margin-left: 10px;
}
Scrollen Sie das Beispiel, um zu sehen, wie die Infobox an den Anker verankert ist. Wenn das anchor-Attribut unterstützt wird, wird die Infobox rechts vom Anker fixiert. Wenn nicht unterstützt, wird die Infobox am Ansichtsfenster fixiert.
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.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4