Die CSS-Ankerpositionierungs-API

Mit der CSS Anchor Positioning API können Sie Elemente relativ zu anderen Elementen positionieren. Diese werden als Anker bezeichnet. Diese API vereinfacht komplexe Layoutanforderungen für viele Funktionen der Benutzeroberfläche wie Menüs und Untermenüs, Kurzinfos, Auswahlmöglichkeiten, Labels, Karten, Dialogfelder für Einstellungen und vieles mehr. Dank der integrierten Ankerpositionierung in den Browser können Sie Benutzeroberflächen mit mehreren Ebenen erstellen, ohne dafür Drittanbieterbibliotheken verwenden zu müssen. Dadurch eröffnen sich unendlich viele kreative Möglichkeiten.

Kernkonzepte: Anker und positionierte Elemente

Im Mittelpunkt dieser API steht die Beziehung zwischen Ankern und positionierten Elementen. Ein Anker ist ein Element, das mithilfe der Property anchor-name als Referenzpunkt festgelegt wird. Ein positioniertes Element ist ein Element, das mithilfe der Property position-anchor oder explizit mit anchor-name in der Positionierungslogik relativ zu einem Anker platziert wird.

Anker einrichten

Das Erstellen eines Ankers ist ganz einfach. Wenden Sie die Anchor-Name-Eigenschaft auf das ausgewählte Element an und weisen Sie ihm eine eindeutige Kennung zu. Dieser eindeutigen Kennung muss, ähnlich wie bei einer CSS-Variablen, ein doppelter Bindestrich vorangestellt werden.

.anchor-button {
    anchor-name: --anchor-el;
}

Nachdem .anchor-button einen Ankernamen zugewiesen wurde, dient es als Anker, an dem andere Elemente ausgerichtet werden können. Sie können diesen Anker auf zwei Arten mit anderen Elementen verbinden:

Implizite Anker

Die erste Möglichkeit, einen Anker mit einem anderen Element zu verbinden, ist die Verwendung eines impliziten Ankers wie im folgenden Codebeispiel. Die Property position-anchor wird dem Element hinzugefügt, das Sie mit dem Anker verbinden möchten, und hat den Namen des Ankers (in diesem Fall --anchor-el) als Wert.

.positioned-notice {
    position-anchor: --anchor-el;
}

Bei einer impliziten Ankerbeziehung können Sie Elemente mithilfe der Funktion anchor() positionieren, ohne den Ankernamen explizit beim ersten Argument anzugeben.

.positioned-notice {
    position-anchor: --anchor-el;
    top: anchor(bottom);
}

Explizite Anker

Alternativ können Sie den Ankernamen direkt in der Ankerfunktion verwenden (z. B. top: anchor(--anchor-el bottom). Dies wird als expliziter Anker bezeichnet und kann nützlich sein, wenn Sie an mehreren Elementen ankern möchten. Weitere Informationen finden Sie im Beispiel unten.

.positioned-notice {
    top: anchor(--anchor-el bottom);
}

Elemente relativ zu Ankern positionieren

Die Positionierung von Ankern basiert auf der absoluten Positionierung in CSS. Wenn Sie Positionierungswerte verwenden möchten, müssen Sie dem positionierten Element position: absolute hinzufügen. Verwenden Sie dann die Funktion anchor(), um die Positionierungswerte anzuwenden. Wenn Sie ein angedocktes Element beispielsweise links oben am andockenden Element positionieren möchten, verwenden Sie die folgende Positionierung:

.positioned-notice {
    position-anchor: --anchor-el;
    /* absolutely position the positioned element */
    position: absolute;
    /* position the right of the positioned element at the right edge of the anchor */
    right: anchor(right);
    /* position the bottom of the positioned element at the top edge of the anchor */
    bottom: anchor(top);
}

Jetzt haben Sie ein Element mit einem anderen verankert:

Wenn Sie für diese Werte die logische Positionierung verwenden möchten, entsprechen sie den folgenden Werten:

• top = inset-block-start
• left= inset-inline-start
• bottom = inset-block-end
• right= inset-inline-end

Positioniertes Element mit anchor-center zentrieren

Damit Sie das an einem Anker positionierte Element leichter relativ zum Anker zentrieren können, gibt es den neuen Wert anchor-center, der mit den Eigenschaften justify-self, align-self, justify-items und align-items verwendet werden kann.

In diesem Beispiel wird das vorherige Beispiel geändert, indem das positionierte Element mit justify-self: anchor-center über dem Anker zentriert wird.

.positioned-notice {
  position: absolute;
  /*  Anchor reference  */
  position-anchor: --anchor-el;
  /*  Position bottom of positioned elem at top of anchor  */
  bottom: anchor(top);
  /*  Center justification to the anchor */
  justify-self: anchor-center;
}

Mehrere Anker

Elemente können an mehr als einem Anker verankert werden. Das bedeutet, dass Sie möglicherweise Positionswerte festlegen müssen, die relativ zu mehr als einem Anker positioniert sind. Dazu verwenden Sie die anchor()-Funktion und geben explizit an, auf welchen Anker Sie im ersten Argument verweisen. Im folgenden Beispiel ist die linke obere Ecke eines positionierten Ankers an der unteren rechten Ecke eines Ankers und die untere rechte des positionierten Elements oben links des zweiten Ankers verankert:

.anchored {
  position: absolute;
  top: anchor(--one bottom);
  left: anchor(--one right);
  right: anchor(--two left);
  bottom: anchor(--two top);
}

Position mit position-area

Die Anchoring API enthält einen neuen Layoutmechanismus, der das Attribut position-area verwendet.

Mit dieser Eigenschaft können Sie Ankerelemente relativ zu ihren jeweiligen Ankern platzieren. Diese Eigenschaft funktioniert bei einem Raster mit neun Zellen, bei dem das Verankerungselement in der Mitte ist.

Wenn Sie position-area anstelle der absoluten Positionierung verwenden möchten, verwenden Sie die Property position-area mit physischen oder logischen Werten. Beispiel:

• Oben mittig: position-area: top oder position-area: block-start
• Links Mitte: position-area: left oder position-area: inline-start
• Unten in der Mitte: position-area: bottom oder position-area: block-end
• Rechtszentriert: position-area: right oder position-area: inline-end

Um diese Positionen genauer zu untersuchen, sehen Sie sich das folgende Tool an:

Elemente mit anchor-size() skalieren

Die anchor-size()-Funktion, die ebenfalls Teil der Anchor Positioning API ist, kann verwendet werden, um die Größe oder Position eines Ankerelements anhand der Größe seines Ankers (Breite, Höhe oder Inline- und Blockgrößen) festzulegen oder zu positionieren.

Im folgenden CSS wird ein Beispiel für die Verwendung dieses Werts für die Höhe gezeigt. Dabei wird anchor-size(height) in einer calc()-Funktion verwendet,um die maximale Höhe der Kurzinfo auf die doppelte Höhe des Ankers festzulegen.

.positioned-notice {
  position-anchor: --question-mark;

  /*  set max height of the tooltip to 2x height of the anchor  */
  max-height: calc(anchor-size(height) * 2);
}

Anker mit Elementen der obersten Ebene wie Popover und Dialogfeld verwenden

Die Anlegeposition funktioniert hervorragend mit Elementen der obersten Ebene wie popover. und <dialog>. Während diese Elemente in einer separaten Ebene vom Rest der DOM-Unterstruktur platziert werden, können Sie sie mithilfe der Positionierung von Anker an eine Tethering-Verbindung zurückverfolgen und mit Elementen, die sich nicht im obersten Layer befinden, mit ihnen scrollen. Das ist ein großer Vorteil von mehrschichtigen Benutzeroberflächen.

Im folgenden Beispiel wird eine Reihe von Kurzinfo-Popovers über eine Schaltfläche zum Öffnen ausgelöst. Die Schaltfläche ist der Anker und die Kurzinfo ist das positionierte Element. Sie können das positionierte Element wie jedes andere verankerte Element gestalten. In diesem konkreten Beispiel sind anchor-name und position-anchor Inline-Stile für die Schaltfläche und die Kurzinfo. Da jeder Anker einen eindeutigen Ankernamen benötigt, ist das Einfügen beim Generieren dynamischer Inhalte die einfachste Methode.

Ankerpositionen mit @position-try anpassen

Nachdem Sie die anfängliche Position des Ankers ermittelt haben, können Sie die Position anpassen, wenn der Anker die Kanten des enthaltenden Blocks erreicht. Zum Erstellen alternativer Ankerpositionen können Sie die Anweisung @position-try zusammen mit der Eigenschaft position-try-fallbacks verwenden.

Im folgenden Beispiel wird rechts neben einem Menü ein Untermenü angezeigt. Menüs und Untermenüs eignen sich hervorragend zur Verwendung der Anchor Positioning API zusammen mit dem Popover-Attribut, da diese Menüs tendenziell an einer Triggerschaltfläche verankert sind.

Wenn für dieses Untermenü nicht genügend horizontaler Platz vorhanden ist, können Sie es stattdessen unter das Menü verschieben. Richten Sie dazu zunächst die Ausgangsposition ein:

#submenu {
  position: absolute;
  position-anchor: --submenu;

  /* initial position */
  margin-left: var(--padding);
  position-area: right span-bottom;
}

Richten Sie dann mit @position-try die verankerten Fallback-Positionen ein:

/* alternate position */
@position-try --bottom {
  margin: var(--padding) 0 0 var(--padding);
  posotion-area: bottom;
}

Verbinden Sie die beiden schließlich mit position-try-fallbacks. Zusammen sieht das so aus:

#submenu {
  position: absolute;
  position-anchor: --submenu;
  /* initial position */
  margin-left: var(--padding);
  position-area: right span-bottom;
  */ connect with position-try-fallbacks */
  position-try-fallbacks: --bottom;
}

/* alternate position */
@position-try --bottom {
  margin: var(--padding) 0 0 var(--padding);
  position-area: bottom;
}

Keywords für automatisches Umblättern von Ankerpositionen

Wenn Sie eine grundlegende Anpassung haben, z. B. von oben nach unten oder von links nach rechts (oder beides), können Sie sogar die Erstellung benutzerdefinierter @position-try-Deklarationen überspringen und die integrierten, browsergestützten Keywords wie flip-block und flip-inline verwenden. Sie können als Platzhalter für benutzerdefinierte @position-try-Deklarationen verwendet werden und miteinander kombiniert werden:

position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;

Mit Flip-Keywords lässt sich Ihr Ankercode erheblich vereinfachen. Mit nur wenigen Zeilen können Sie einen voll funktionsfähigen Anker mit alternativen Positionen erstellen:

#my-tooltip {
  position-anchor: --question-mark;
  position-area: top;
  position-try-fallbacks: flip-block;
}

position-visibility für Anker in Subscrollers

Es gibt einige Fälle, in denen Sie ein Element innerhalb eines Subscrollers der Seite verankern möchten. In diesen Fällen können Sie die Sichtbarkeit des Ankers mit position-visibility steuern. Wann bleibt der Anker sichtbar? Wann verschwindet sie? Mit dieser Funktion haben Sie die Kontrolle über diese Optionen. Sie verwenden position-visibility: anchors-visible, wenn das positionierte Element so lange sichtbar bleiben soll, bis der Anker nicht mehr im Sichtbereich ist:

#tooltip {
  position: fixed;
  position-anchor: --anchor-top-anchor;
  position-visibility: anchors-visible;
  bottom: anchor(top);
}

Alternativ können Sie position-visibility: no-overflow verwenden, um zu verhindern, dass der Anker den Container überläuft.

#tooltip {
  position: absolute;
  position-anchor: --anchor-top-anchor;
  position-visibility: no-overflow;
  bottom: anchor(top);
}

Feature-Erkennung und Polyfill

Da die Browserunterstützung derzeit begrenzt ist, sollten Sie diese API mit einigen Vorsichtsmaßnahmen verwenden. Sie können zuerst direkt in CSS mithilfe der Funktionsabfrage @supports nach Unterstützung suchen. Dazu fassen Sie Ihre Ankerstile wie folgt zusammen:

@supports (anchor-name: --myanchor) {

  /* Anchor styles here */

}

Außerdem können Sie die Funktion zur Positionierung von Ankern mit der CSS-Anker-Positionierungs-Polyfill von Oddbird polyfillen. Diese funktioniert ab Firefox 54, Chrome 51, Edge 79 und Safari 10. Diese Polyfill-Version unterstützt die meisten grundlegenden Funktionen für die Positionierung von Ankern. Die aktuelle Implementierung ist jedoch nicht vollständig und enthält einige veraltete Syntax. Sie können den unpkg-Link verwenden oder das Paket direkt in einen Paketmanager importieren.

Hinweis zur Barrierefreiheit

Mit der API für die Ankerpositionierung kann ein Element zwar relativ zu anderen positioniert werden, es wird dadurch aber keine sinnvolle semantische Beziehung zwischen ihnen hergestellt. Wenn zwischen dem Ankerelement und dem positionierten Element eine semantische Beziehung besteht (z. B. ist das positionierte Element ein Kommentar in der Seitenleiste zum Ankertext), können Sie aria-details verwenden, um vom Ankerelement auf die positionierten Elemente zu verweisen. Screenreader-Software lernt noch, wie mit Aria-Details umgegangen werden soll, aber die Unterstützung wird immer besser.

<div class="anchor" aria-details="sidebar-comment">Main content</div>
<div class="positioned" id="sidebar-comment">Sidebar content</div>

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

.positioned {
  position: fixed;
  position-anchor: --anchor;
}

Wenn Sie die Ankerpositionierung mit dem Attribut popover oder mit einem <dialog>-Element verwenden, übernimmt der Browser die Korrekturen der Fokusnavigation für eine optimale Barrierefreiheit. Ihre Popovers oder Dialogfelder müssen also nicht in der DOM-Reihenfolge vorliegen. Weitere Informationen finden Sie in der Spezifikation in der Anmerkung zur Barrierefreiheit.

Weitere Informationen

• Eine Linie zeichnen, um Elemente mithilfe der CSS-Ankerpositionierung zu verbinden
• Zukünftiges CSS: Ankerpositionierung von Roman Komarov
• Codepen-Sammlung von Anchor-Demos von Una
• Tool zum Positionieren von Ankern