1. Web
  2. CSS
  3. Guides
  4. Anchor positioning
  5. Verwendung der Ankerpositionierung

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

Verwendung von CSS-Ankerpositionierung

Das Modul für CSS-Ankerpositionierung definiert Funktionen, die es ermöglichen, Elemente miteinander zu verknüpfen. Elemente können als Ankerelemente und ankerpositionierte Elemente definiert werden. Ankerpositionierte Elemente können an Ankerelemente gebunden werden. Die ankerpositionierten Elemente können dann in ihrer Größe und Position relativ zur Größe und Lage der gebundenen Ankerelemente festgelegt werden.

Die CSS-Ankerpositionierung bietet auch Mechanismen, um ausschließlich mit CSS mehrere alternative Positionen für ein ankerpositioniertes Element anzugeben. Beispielsweise, wenn ein Tooltip an ein Formularfeld angehängt ist, dieser jedoch bei den Standardpositionseinstellungen von der Seite gerendert würde, kann der Browser versuchen, ihn in einer anderen vorgeschlagenen Position zu rendern, damit er sichtbar ist, oder ihn alternativ vollständig ausblenden, wenn gewünscht.

Dieser Artikel erklärt die grundlegenden Konzepte der Ankerpositionierung und wie Sie die Assoziations-, Positionierungs- und Größenfunktionen des Moduls auf grundlegender Ebene verwenden. Wir haben Links zu Referenzseiten mit zusätzlichen Beispielen und Syntaxdetails für jedes behandelte Konzept eingefügt. Informationen zur Angabe alternativer Positionen und zum Ausblenden ankerpositionierter Elemente finden Sie im Leitfaden für Fallback-Optionen und bedingtes Ausblenden bei Überlauf.

Grundlegende Konzepte

Es ist sehr verbreitet, dass ein Element an ein anderes angeheftet oder gebunden werden soll. Zum Beispiel:

  • Fehlermeldungen, die neben Formularsteuerelementen angezeigt werden.
  • Tooltips oder Infoboxen, die neben einem UI-Element aufpoppen, um mehr Informationen darüber zu bieten.
  • Einstellungen oder Optionsdialoge, die aufgerufen werden können, um UI-Elemente schnell zu konfigurieren.
  • Dropdown- oder Popover-Menüs, die neben einer zugehörigen Navigationsleiste oder Schaltfläche erscheinen.

Moderne Schnittstellen erfordern häufig, dass einige Inhalte — oft wiederverwendbar und dynamisch erzeugt — relativ zu einem Ankerelement positioniert werden. Wenn das Element, an das angeheftet werden soll (das sogenannte Ankerelement), immer am selben Ort in der UI wäre und das angeheftete Element (das sogenannte ankerpositionierte Element oder einfach positioniertes Element) immer direkt davor oder danach in der Quellreihenfolge platziert werden könnte, wäre die Erstellung solcher Anwendungsfälle ziemlich einfach. Die Dinge sind jedoch selten so einfach.

Die Lage der positionierten Elemente muss relativ zu ihrem Ankerelement beibehalten und angepasst werden, während sich das Ankerelement bewegt oder sonst wie konfiguriert wird (z. B. durch Scrollen, Änderung der Ansichtsgröße, Drag & Drop, etc.). Beispielsweise, wenn ein Element wie ein Formularfeld nahe an den Rand des Ansichtsfensters kommt, kann sein Tooltip außerhalb des Bildschirms angezeigt werden. Generell möchten Sie den Tooltip an das zugehörige Formularsteuerelement binden und sicherstellen, dass der Tooltip vollständig sichtbar auf dem Bildschirm bleibt, solange das Formularfeld sichtbar ist, und ihn bei Bedarf automatisch verschieben. Sie mögen dies als das Standardverhalten in Ihrem Betriebssystem bemerkt haben, wenn Sie Kontextmenüs auf Ihrem Desktop oder Laptop durch Rechtsklick (Strg + Klick) öffnen.

Historisch gesehen erforderte das Verknüpfen eines Elements mit einem anderen Element und das dynamische Ändern der Position und Größe eines positionierten Elements basierend auf der Position eines Ankers JavaScript, was Komplexität und Leistungsprobleme hinzufügte. Es war auch nicht garantiert, dass es in allen Situationen funktionierte. Die im CSS-Ankerpositionierungsmodul definierten Funktionen ermöglichen es, solche Anwendungsfälle performant und deklarativ mit CSS (und HTML) statt mit JavaScript umzusetzen.

Verknüpfung von Anker- und positionierten Elementen

Um ein Element mit einem Anker zu verknüpfen, müssen Sie zuerst erklären, welches Element der Anker ist, und dann angeben, welches(n) positionierte(n) Element(e) mit diesem Anker verknüpft werden sollen. Dies erstellt eine Ankerreferenz zwischen den beiden. Diese Verknüpfung kann explizit über CSS oder implizit erstellt werden.

Explizite CSS-Ankerverknüpfung

Um ein Element mit CSS als Anker zu deklarieren, müssen Sie einen Ankernamen über die Eigenschaft anchor-name darauf setzen. Der Ankername muss ein <dashed-ident> sein. In diesem Beispiel setzen wir auch die width des Ankers auf fit-content, um einen kleinen quadratischen Anker zu erhalten, der den Verankerungseffekt besser demonstriert.

css
.anchor {
  anchor-name: --my-anchor;
  width: fit-content;
}

Um ein Element in ein ankerpositioniertes Element zu konvertieren, sind zwei Schritte erforderlich: Es muss absolut oder fest positioniert mittels der Eigenschaft position sein. Das positionierte Element hat dann seine Eigenschaft position-anchor auf den Wert der anchor-name-Eigenschaft des Ankerelements gesetzt, um die beiden miteinander zu verbinden:

css
.infobox {
  position: fixed;
  position-anchor: --my-anchor;
}

Wir werden das obige CSS auf das folgende HTML anwenden:

html
<div class="anchor">⚓︎</div>

<div class="infobox">
  <p>This is an information box.</p>
</div>

Dies wird wie folgt gerendert:

Der Anker und die Infobox sind nun verknüpft, aber vorerst müssen Sie uns dabei vertrauen. Sie sind noch nicht aneinander gebunden — wenn Sie den Anker positionieren und ihn woanders auf der Seite verschieben würden, würde er sich alleine bewegen und die Infobox an derselben Stelle lassen. Sie werden das eigentliche Verankerungsprinzip in Aktion sehen, wenn wir Elemente basierend auf der Ankerposition positionieren betrachten.

Implizite Ankerverknüpfung

In einigen Fällen wird eine implizite Ankerreferenz zwischen zwei Elementen aufgrund der semantischen Natur ihrer Beziehung erstellt:

  • Bei der Verwendung der Popover-API zur Verknüpfung eines Popovers mit einem Steuerelement wird eine implizite Ankerreferenz zwischen den beiden erstellt. Dies kann passieren, wenn:
    • Ein Popover mit einem Steuerelement deklarativ über die Attribute popovertarget und id oder die Attribute commandfor und id verknüpft wird.
    • Eine Popover-Aktion wie showPopover() programmatisch mit einem Steuerelement unter Verwendung der source-Option verbunden wird.
  • Ein <select>-Element und sein Dropdown-Auswahlsymbol sind über die Darstellung der appearance-Eigenschaft base-select in anpassbare Select-Elemente eingebunden. In diesem Fall wird eine implizite Popover-Auslöser-Beziehung zwischen den beiden erstellt, was auch bedeutet, dass sie eine implizite Ankerreferenz haben werden.

Hinweis: Die oben genannten Methoden verknüpfen einen Anker mit einem Element, aber sie sind noch nicht verankert. Damit sie miteinander verankert werden, muss das positionierte Element relativ zu seinem Anker positioniert werden, was mit CSS erfolgt.

Entfernen einer Ankerverknüpfung

Wenn Sie eine zuvor erstellte explizite Ankerverknüpfung zwischen einem Ankerelement und einem positionierten Element entfernen möchten, können Sie eines der folgenden tun:

  1. Setzen Sie den anchor-name-Eigenschaftswert des Ankers auf none oder auf eine andere <dashed-ident>, falls Sie ein anderes Element an ihn binden möchten.
  2. Setzen Sie die position-anchor-Eigenschaft des positionierten Elements auf einen Ankernamen, der im aktuellen Dokument nicht existiert, wie etwa --not-an-anchor-name.

Im Fall von impliziten Ankerverknüpfungen müssen Sie jedoch die zweite Methode verwenden — die erste Methode funktioniert nicht. Dies liegt daran, dass die Verknüpfung intern gesteuert wird und Sie den anchor-name nicht via CSS entfernen können.

Um beispielsweise zu verhindern, dass die Auswahlsymbolleiste eines anpassbaren <select>-Elements an das <select>-Element selbst verankert wird, können Sie die folgende Regel verwenden:

css
::picker(select) {
  position-anchor: --not-an-anchor-name;
}

Positionierung von Elementen relativ zu ihrem Anker

Wie wir oben gesehen haben, hat das Verknüpfen eines positionierten Elements mit einem Anker allein nicht viel Nutzen. Unser Ziel ist es, das positionierte Element relativ zu seinem zugeordneten Ankerelement zu platzieren. Dies wird entweder durch Setzen eines CSS anchor()-Funktionswerts auf eine Inset-Eigenschaft, Angabe eines position-area, oder Zentrieren des positionierten Elements mit dem anchor-center-Platzierungswert erreicht.

Hinweis: Die CSS-Ankerpositionierung bietet auch Mechanismen zum Festlegen alternativer Positionen, falls die Standardposition des positionierten Elements dazu führt, dass es den Ansichtbereich überläuft. Weitere Einzelheiten finden Sie im Leitfaden für Fallback-Optionen und bedingtes Ausblenden.

Hinweis: Das Ankerelement muss ein sichtbarer DOM-Knoten sein, damit die Verknüpfung und Positionierung funktioniert. Wenn es ausgeblendet ist (zum Beispiel via display: none), wird das positionierte Element relativ zu seinem nächsten positionierten Vorfahren positioniert. Wir diskutieren, wie ein ankerpositioniertes Element ausgeblendet wird, wenn sein Anker verschwindet, im Abschnitt Bedingtes Ausblenden mittels position-visibility.

Verwendung von Inset-Eigenschaften mit anchor() Funktionswerten

Konventionell absolut und fest positionierte Elemente werden explizit durch das Setzen von <length>- oder <percentage>-Werten auf Inset-Eigenschaften positioniert. Mit position: absolute ist dieser Inset-Positionswert eine absolute Distanz relativ zu den Kanten des nächstgelegenen positionierten Vorfahren. Mit position: fixed ist der Inset-Positionswert eine absolute Distanz relativ zum Ansichtsfenster.

Die CSS-Ankerpositionierung ändert dieses Paradigma und ermöglicht es, ankerpositionierte Elemente relativ zu den Kanten ihrer zugeordneten Anker zu platzieren. Das Modul definiert die anchor()-Funktion, die ein gültiger Wert für jede der Inset-Eigenschaften ist. Wird diese Funktion verwendet, wird der Inset-Positionswert als absolute Distanz relativ zum Ankerelement festgelegt, indem das Ankerelement, die Seite des Ankerelements, zu der das positionierte Element relativ positioniert wird, und die Distanz von dieser Seite definiert wird.

Die Funktionsbestandteile sehen folgendermaßen aus:

anchor(<anchor-name> <anchor-side>, <fallback>)
<anchor-name>

Der anchor-name Eigenschaftswert des Ankerelements, zu dem Sie die Seite des Elements relativ positionieren möchten. Dies ist ein <dashed-ident>-Wert. Wenn weggelassen, wird der Standardanker des Elements verwendet. Dies ist der Anker, der in seiner position-anchor Eigenschaft referenziert wird oder über das nicht standardisierte anchor HTML-Attribut mit dem Element verknüpft ist.

Hinweis: Die Spezifikation eines <anchor-name> positioniert das Element relativ zu diesem Anker, stellt jedoch keine Elementverknüpfung her. Während Sie die Seiten eines Elements relativ zu mehreren Ankern positionieren können, indem Sie unterschiedliche <anchor-name>-Werte in verschiedenen anchor()-Funktionen auf demselben Element spezifizieren, ist das positionierte Element nur mit einem einzigen Anker verknüpft.

<anchor-side>

Gibt die Position relativ zu einer Seite oder Seiten des Ankers an. Gültige Werte umfassen das center des Ankers, physische (top, left, etc.) oder logische (start, self-end, etc.) Seiten des Ankers oder einen <percentage> zwischen dem Anfang (0%) und Ende (100%) der Achse der Inset-Eigenschaft, auf der anchor() gesetzt ist. Wenn ein Wert verwendet wird, der nicht kompatibel mit der Inset-Eigenschaft ist, auf der die anchor()-Funktion gesetzt ist, wird der Fallback-Wert verwendet.

<fallback>

Ein <length-percentage>, der die Entfernung angibt, die als Fallback-Wert verwendet wird, wenn das Element nicht absolut oder fest positioniert ist, wenn der verwendete <anchor-side>-Wert nicht mit der Inset-Eigenschaft kompatibel ist, auf der die anchor()-Funktion gesetzt ist, oder wenn das Ankerelement nicht existiert.

Der Rückgabewert der anchor()-Funktion ist ein Längenwert, der basierend auf der Position des Ankers berechnet wird. Wenn Sie einen Längen- oder Prozentwert direkt auf einer Inset-Eigenschaft eines ankerpositionierten Elements setzen, wird er positioniert, als wäre er nicht an das Ankerelement gebunden. Dies ist dasselbe Verhalten, das zu sehen ist, wenn der <anchor-side>-Wert mit der Inset-Eigenschaft, auf der er gesetzt ist, nicht kompatibel ist und der Fallback verwendet wird. Diese beiden Deklarationen sind gleichwertig:

css
bottom: anchor(right, 50px);
bottom: 50px;

Beide platzieren das positionierte Element 50px oberhalb des Bodens des nächstgelegenen positionierten Vorfahren (falls vorhanden) oder des initialen umhüllenden Blocks.

Die häufigsten anchor()-Parameter, die Sie verwenden werden, werden auf eine Seite des Standardankers verweisen. Sie werden auch oft entweder einen margin hinzufügen, um einen Abstand zwischen der Kante des Ankers und des positionierten Elements zu erzeugen oder anchor() innerhalb einer calc()-Funktion verwenden, um diesen Abstand hinzuzufügen.

Zum Beispiel positioniert diese Regel die rechte Kante des positionierten Elements bündig zur linken Kante des Ankerelements und fügt dann etwas margin-left hinzu, um Platz zwischen den Kanten zu schaffen:

css
.positionedElement {
  right: anchor(left);
  margin-left: 10px;
}

Der Rückgabewert einer anchor()-Funktion ist eine Länge. Das bedeutet, dass Sie ihn innerhalb einer calc()-Funktion verwenden können. Diese Regel positioniert die logisch blockierende Endkante des positionierten Elements 10px von der logisch blockierenden Startkante des Ankerelements entfernt, wobei der Abstand mit der calc()-Funktion hinzugefügt wird, sodass wir keinen Rand hinzufügen müssen:

css
.positionedElement {
  inset-block-end: calc(anchor(start) + 10px);
}

anchor() Beispiel

Schauen wir uns ein Beispiel für anchor() in Aktion an. Wir haben dasselbe HTML wie in den vorherigen Beispielen verwendet, aber mit etwas Fülltext darunter und darüber, um den Inhalt über seine Umhüllung herauszufordern und zu scrollen. Wir geben dem Ankerelement denselben anchor-name-Wert wie in den vorherigen Beispielen:

css
.anchor {
  anchor-name: --my-anchor;
}

Die Infobox ist über den Ankernamen mit dem Anker verbunden und hat eine feste Positionierung erhalten. Durch das Einfügen der inset-block-start- und inset-inline-start-Eigenschaften (die im horizontalen Links-nach-Rechts-Schreibmodus den top- und left-Eigenschaften entsprechen) haben wir sie an den Anker gebunden. Wir fügen der Infobox einen margin hinzu, um Raum zwischen dem positionierten Element und seinem Anker zu schaffen:

css
.infobox {
  position-anchor: --my-anchor;
  position: fixed;
  inset-block-start: anchor(end);
  inset-inline-start: anchor(self-end);
  margin: 5px 0 0 5px;
}

Sehen wir uns die Inset-Positionierungserklärungen genauer an:

  • inset-block-start: anchor(end): Diese setzt die blockierende Startkante des positionierten Elements zur blockierenden Endkante des Ankers, berechnet mit der anchor(end)-Funktion.
  • inset-inline-start: anchor(self-end): Diese setzt die inline-Startkante des positionierten Elements zur inline-Endkante des Ankers, berechnet mit der anchor(self-end)-Funktion.

Dies ergibt das folgende Ergebnis:

Das positionierte Element ist 5px unterhalb und 5px rechts vom Ankerelement. Wenn Sie das Dokument hoch und runter scrollen, bleibt das positionierte Element relativ zum Ankerelement positioniert — es ist am Ankerelement fixiert, nicht am Ansichtsfenster.

Festlegen einer position-area

Die position-area-Eigenschaft bietet eine Alternative zur anchor()-Funktion, um Elemente relativ zu Ankern zu positionieren. Die position-area-Eigenschaft funktioniert nach dem Prinzip eines 3x3-Rasters von Kacheln, wobei das Ankerelement die mittlere Kachel ist. Die position-area-Eigenschaft kann verwendet werden, um das ankerpositionierte Element in eine der neun Kacheln zu positionieren oder es über zwei oder drei Kacheln zu spannen.

Das position-area Raster, wie unten beschrieben

Die Rasterkacheln sind in Reihen und Spalten unterteilt:

  • Die drei Reihen werden durch die physischen Werte top, center und bottom dargestellt. Sie haben auch logische Äquivalente wie start, center und end, und koordinatenmäßige Äquivalente wie y-start, center und y-end.
  • Die drei Spalten werden durch die physischen Werte left, center und right dargestellt. Sie haben auch logische Äquivalente wie start, center und end, und koordinatenmäßige Äquivalente wie x-start, center und x-end.

Die Abmessungen der mittleren Kachel werden durch den umhüllenden Block des Ankerelements definiert, während der Abstand zwischen der mittleren Kachel und dem äußeren Rand des Rasters durch den umhüllenden Block des positionierten Elements definiert wird.

Die Werte der position-area-Eigenschaft bestehen aus einem oder zwei Werten basierend auf den oben beschriebenen Zeilen- und Spaltenwerten, mit Spannoptionen verfügbar, um die Region des Rasters zu definieren, in dem das Element positioniert werden soll.

Zum Beispiel:

Sie können zwei Werte angeben, um das positionierte Element in einem bestimmten Rasterquadrat zu platzieren. Zum Beispiel:

  • top left (logisches Äquivalent start start) platziert das positionierte Element im oberen linken Quadrat.
  • bottom center (logisches Äquivalent end center) platziert das positionierte Element im zentralen unteren Quadrat.

Sie können einen Zeilen- oder Spaltenwert plus einen span-*-Wert angeben. Der erste Wert gibt die Zeile oder Spalte an, in der das positionierte Element platziert werden soll, zunächst in der Mitte, und der andere gibt die Menge dieser Spalte an, die es umspannen soll. Zum Beispiel:

  • top span-left bewirkt, dass das positionierte Element in der oberen Zeile platziert wird und über die mittleren und linken Kacheln dieser Zeile spannt.
  • y-end span-x-end bewirkt, dass das positionierte Element am Ende der y-Spalte platziert wird und über die mittleren und x-end-Kacheln dieser Spalte spannt.
  • block-end span-all bewirkt, dass das positionierte Element in der blockierenden Endzeile platziert wird und über die inline-start, center und inline-end Kacheln dieser Zeile spannt.

Wenn Sie nur einen Wert angeben, ist der Effekt abhängig davon, welcher Wert gesetzt wird:

  • Ein physischer Seitenwert (top, bottom, left oder right) oder Koordinatenwert (y-start, y-end, x-start, x-end) wirkt wie wenn der andere Wert span-all wäre. Zum Beispiel, top hat denselben Effekt wie top span-all.
  • Ein logischer Seitenwert (start oder end) wirkt, als ob der andere Wert auf denselben Wert gesetzt ist; zum Beispiel, start hat denselben Effekt wie start start.
  • Ein Wert von center wirkt, als ob beide Werte auf center gesetzt sind (center center).

Hinweis: Siehe die Referenzseite für den <position-area> Wert für eine detaillierte Beschreibung aller verfügbaren Werte. Die Mischung eines logischen Wertes mit einem physischen Wert macht die Deklaration ungültig.

Demonstrieren wir einige dieser Werte; dieses Beispiel verwendet dasselbe HTML und die gleichen Basis-CSS-Stile wie das vorherige Beispiel, außer dass wir ein <select>-Element hinzugefügt haben, mit dem der position-area-Wert des positionierten Elements geändert werden kann.

Die Infobox wird fest positioniert und mit dem Anker mithilfe von CSS verknüpft. Beim Laden wird sie auf position-area: top; gesetzt, was dazu führt, dass sie oben im position-area Raster positioniert wird. Sobald Sie andere Werte aus dem <select> Menü auswählen, wird dies überschrieben.

css
.infobox {
  position: fixed;
  position-anchor: --my-anchor;
  position-area: top;
}

Wir fügen auch ein kurzes Skript hinzu, um neue position-area-Werte aus dem <select> Menü auf die Infobox anzuwenden:

js
const infobox = document.querySelector(".infobox");
const selectElem = document.querySelector("select");

selectElem.addEventListener("change", () => {
  const area = selectElem.value;

  // Set the position-area to the value chosen in the select box
  infobox.style.positionArea = area;
});

Versuchen Sie, neue position-area-Werte aus dem <select> Menü auszuwählen, um die Auswirkungen auf die Position der Infobox zu sehen:

Breite des positionierten Elements

Im obigen Beispiel haben wir das positionierte Element nicht explizit in irgendeiner Dimension dimensioniert. Wir haben die Größenangaben absichtlich ausgelassen, um Ihnen das Ergebnis zu ermöglichen, das dadurch entsteht.

Wenn ein positioniertes Element ohne explizite Dimensionierung in die position-area Rasterzellen platziert wird, richtet es sich nach dem angegebenen Rasterbereich und verhält sich so, als wäre die width auf max-content gesetzt. Es wird entsprechend seiner umgebenden Block-Größe dimensioniert, was die Breite seines Inhalts ist. Diese Größe wird durch das Setzen von position: fixed erzwungen. Automatisch dimensionierte absolut und fest positionierte Elemente werden automatisch dimensioniert und dehnen sich so weit wie nötig aus, um den Textinhalt zu ermöglichen, während sie durch den Rand des Ansichtsfensters eingeschränkt werden. In diesem Fall, wenn auf der linken Seite des Rasters mit einem beliebigen left- oder inline-start-Wert platziert, wird der Text umgebrochen. Wenn die max-content Größe des verankerten Elements schmaler oder kürzer ist als der Anker, werden sie nicht wachsen, um die Größe des Ankers zu erreichen.

Wenn das positionierte Element vertikal zentriert ist, wie z. B. mit position-area: bottom center, wird es mit der spezifizierten Rasterzelle ausgerichtet und die Breite wird die gleiche wie die des Ankerelements sein. In diesem Fall ist seine Mindesthöhe die umschließende Blockgröße des Ankerelements. Es wird nicht überlaufen, da die min-width auf min-content gesetzt ist, was bedeutet, dass es mindestens so breit wie sein längstes Wort sein wird.

Zentrierung auf dem Anker mit anchor-center

Obwohl Sie das ankerpositionierte Element mit den center-Werten von position-area zentrieren können, bieten Inset-Eigenschaften kombiniert mit der anchor()-Funktion mehr Kontrolle über die genaue Position. Die CSS-Ankerpositionierung bietet eine Möglichkeit, ein ankerpositioniertes Element relativ zu seinem Anker zu zentrieren, wenn Inset-Eigenschaften anstelle von position-area verwendet werden, um es zu befestigen.

Die Eigenschaften justify-self, align-self, justify-items, und align-items (und ihre place-items und place-self Shorthands} existieren, um Entwicklern die Möglichkeit zu geben, Elemente in der Inline- oder Blockrichtung in verschiedenen Layoutsystemen einfach auszurichten, beispielsweise entlang der Haupt- oder Querachse im Fall von Flexkindern. Die CSS-Ankerpositionierung bietet einen zusätzlichen Wert für diese Eigenschaften, anchor-center, der ein positioniertes Element mit dem Zentrum seines Standardankers ausrichtet.

Dieses Beispiel verwendet dasselbe HTML und die gleichen Basis-CSS wie das vorherige Beispiel. Die Infobox wird fest positioniert und an der unteren Kante des Ankers verankert. justify-self: anchor-center wird dann verwendet, um sicherzustellen, dass es horizontal auf das Zentrum des Ankers zentriert ist:

css
.infobox {
  position: fixed;
  position-anchor: --my-anchor;
  top: calc(anchor(bottom) + 5px);
  justify-self: anchor-center;
}

Dies zentriert das ankerpositionierte Element am unteren Rand seines Ankers:

Größenanpassung von Elementen basierend auf der Ankergröße

Neben der Positionierung eines Elements relativ zur Ankerposition können Sie auch die Größe eines Elements relativ zur Ankergröße mittels der anchor-size()-Funktion innerhalb eines Größen-Eigenschaftswertes festlegen.

Größeneigenschaften, die einen anchor-size()-Wert akzeptieren können, umfassen:

anchor-size()-Funktionen lösen sich in <length>-Werte auf. Ihre Syntax sieht so aus:

anchor-size(<anchor-name> <anchor-size>, <length-percentage>)
<anchor-name>

Der <dashed-ident> Name, der als Wert der anchor-name-Eigenschaft des Ankerelements gesetzt ist, zu dem Sie das Element relativ dimensionieren möchten. Wenn weggelassen, wird der Standardanker des Elements verwendet, der im position-anchor-Eigenschaft referenziert ist.

<anchor-size>

Gibt die Dimension des Ankerelements an, zu dem das positionierte Element dimensioniert wird. Dies kann in physischen (width oder height) oder logischen (inline, block, self-inline, oder self-block) Werten ausgedrückt werden.

<length-percentage>

Gibt die Größe an, die als Fallback-Wert verwendet wird, wenn das Element nicht absolut oder fest positioniert ist oder das Ankerelement nicht existiert.

Die häufigsten anchor-size()-Funktionen, die Sie verwenden werden, werden einfach auf eine Dimension des Standardankers verweisen. Sie können sie auch innerhalb von calc()-Funktionen verwenden, um die auf das positionierte Element angewendete Größe zu modifizieren.

Zum Beispiel, diese Regel dimensioniert die Breite des positionierten Elements gleich der Breite des Standardankerelements:

css
.elem {
  width: anchor-size(width);
}

Diese Regel dimensioniert die Inline-Größe des positionierten Elements auf das Vierfache der Inline-Größe des Ankerelements, wobei die Multiplikation innerhalb einer calc()-Funktion erfolgt:

css
.elem {
  inline-size: calc(anchor-size(self-inline) * 4);
}

Sehen wir uns ein Beispiel an. Das HTML und die Basis-CSS sind dieselben wie in den vorherigen Beispielen, außer dass dem Ankerelement ein tabindex="0"-Attribut gegeben wird, um es fokussierbar zu machen. Die Infobox wird fest positioniert und auf dieselbe Weise wie zuvor mit dem Anker verknüpft. Diesmal verankern wir sie jedoch rechts vom Anker mit position-area und geben ihr eine Breite, die das Fünffache der Breite des Ankers ausmacht:

css
.infobox {
  position: fixed;
  position-anchor: --my-anchor;
  position-area: right;
  margin-left: 5px;
  width: calc(anchor-size(width) * 5);
}

Außerdem erhöhen wir die width des Ankerelements bei :hover und :focus, und geben ihm eine transition, sodass es bei Zustandsänderungen animiert wird.

css
.anchor {
  text-align: center;
  width: 30px;
  transition: 1s width;
}

.anchor:hover,
.anchor:focus {
  width: 50px;
}

Fahren Sie mit der Maus über das Ankerelement oder verwenden Sie die Tabulator-Taste — das positionierte Element wächst, während der Anker wächst, und demonstriert, dass die Größe des ankerpositionierten Elements relativ zu seinem Anker ist:

Weitere Verwendungen von anchor-size()

Sie können anchor-size() auch in physischen und logischen Inset- und Rand-Eigenschaften verwenden. Die folgenden Abschnitte untersuchen diese Verwendungen detaillierter, bevor ein Anwendungsbeispiel bereitgestellt wird.

Elementposition basierend auf der Ankergröße einstellen

Sie können die anchor-size()-Funktion innerhalb eines Inset-Eigenschaftswerts verwenden, um Elemente basierend auf der Größe ihres Ankerelements zu positionieren, zum Beispiel:

css
left: anchor-size(width);
inset-inline-end: anchor-size(--my-anchor height, 100px);

Dies positioniert ein Element nicht relativ zur Position seines Ankers wie die anchor()-Funktion oder die position-area-Eigenschaft (siehe Positionierung von Elementen relativ zu ihrem Anker, oben); das Element wird sich bei einer Änderung der Position seines Ankers nicht ändern. Stattdessen wird das Element gemäß den normalen Regeln für absolute oder fixed-Positionierung positioniert.

Dies kann in einigen Situationen nützlich sein. Wenn Ihr Ankerelement beispielsweise nur vertikal verschiebbar ist und immer neben dem Rand seines nächstgelegenen positionierten Vorfahren horizontal bleibt, könnten Sie left: anchor-size(width) verwenden, um das ankerpositionierte Element immer rechts neben seinem Anker zu positionieren, auch wenn sich die Ankerbreite ändert.

Elementrand basierend auf der Ankergröße einstellen

Sie können die anchor-size()-Funktion innerhalb eines margin-*-Eigenschaftswerts verwenden, um Elementränder basierend auf der Größe ihrer Ankerelemente einzustellen, zum Beispiel:

css
margin-left: calc(anchor-size(width) / 4);
margin-block-start: anchor-size(--my-anchor self-block, 20px);

Dies kann in Fällen nützlich sein, in denen Sie den Rand eines ankerpositionierten Elements immer gleich einem bestimmten Prozentsatz der Breite des Ankerelements halten möchten, auch wenn sich die Breite ändert.

anchor-size() Positions- und Randbeispiel

Schauen wir uns ein Beispiel an, bei dem wir den Rand und die Position eines ankerpositionierten Elements relativ zur Breite des Ankerelements einstellen.

Im HTML geben wir zwei <div>-Elemente an, ein anchor-Element und ein infobox-Element, das wir relativ zum Anker positionieren werden. Wir geben dem Ankerelement ein tabindex-Attribut, damit es per Tastatur fokussiert werden kann. Wir fügen auch Fülltext hinzu, um den <body> groß genug zu machen, um das Scrollen zu erfordern, aber dies wurde der Kürze halber ausgelassen.

html
<div class="anchor" tabindex="0">⚓︎</div>

<div class="infobox">
  <p>Infobox.</p>
</div>

Im CSS deklarieren wir zuerst das anchor <div> als Ankerelement, indem wir ihm einen anchor-name geben. Das positionierte Element hat seine position-Eigenschaft auf absolute gesetzt und ist über seine position-anchor-Eigenschaft mit dem Ankerelement verknüpft. Wir setzen auch absolute height- und width-Dimensionen auf Anker und Infobox und schließen einen transition auf dem Anker ein, damit Breitenänderungen während der Zustandsänderungen sanft animiert werden:

css
.anchor {
  anchor-name: --my-anchor;
  width: 100px;
  height: 100px;
  transition: 1s all;
}

.infobox {
  position-anchor: --my-anchor;
  position: absolute;
  height: 100px;
  width: 100px;
}

Jetzt zum interessantesten Teil. Hier setzen wir die width des Ankers auf 300px, wenn er gehovert oder fokussiert wird. Wir setzen die infobox:

  • top Wert auf anchor(top). Dies bewirkt, dass das obere Ende der Infobox immer im Einklang mit dem oberen Ende des Ankers bleibt.
  • left Wert auf anchor-size(width). Dies bewirkt, dass das linke Ende der Infobox die spezifizierte Entfernung vom linken Rand ihres nächstgelegenen positionierten Vorfahren entfernt ist. In diesem Fall ist die spezifizierte Entfernung gleich der Breite des Ankerelements und der nächste positionierte Vorfahre ist das <body>-Element, sodass die Infobox auf der rechten Seite des Ankers erscheint.
  • margin-left Wert auf calc(anchor-size(width)/4). Dies bewirkt, dass die Infobox immer einen linken Rand hat, der sie und den Anker trennt und gleich einem Viertel der Ankerbreite ist.
css
.anchor:hover,
.anchor:focus {
  width: 300px;
}

.infobox {
  top: anchor(top);
  left: anchor-size(width);
  margin-left: calc(anchor-size(width) / 4);
}

Das gerenderte Ergebnis ist wie folgt:

Versuchen Sie, den Anker mit der Tabulatortaste zu fokussieren oder mit der Maus darüber zu fahren, und beachten Sie, wie sich Position und linker Rand der Infobox proportional zur Breite des Ankerelements vergrößern.

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden