position-anchor

Die Eigenschaft position-anchor verknüpft ein absolut positioniertes Element mit einem „Anker“-Element. Dies definiert den Standardanker und wird für die verschiedenen Ankereigenschaften und -funktionen des „Ziel“-Elements verwendet.

Anders ausgedrückt, positioniert (oder verankert) die Eigenschaft ein Element an einem anderen Element, das wir als Wert der Eigenschaft festlegen.

.target {
  position-anchor: --my-anchor
}

Für sich allein bewirkt dieses Beispiel nichts anderes, als dem Element .target mitzuteilen, dass es an einem anderen Element positioniert (oder verankert) ist, das durch einen gestrichelten Bezeichner namens --my-anchor dargestellt wird. Das Problem ist, dass wir noch nicht definiert haben, was --my-anchor tatsächlich ist.

Wir werden zu einem vollständig funktionierenden Beispiel kommen, nachdem wir mehr Kontext über die Eigenschaft erhalten haben, einschließlich ihrer Syntax und akzeptierten Werte.

Syntax

position-anchor: auto | <anchor-element>;

• Anfangswert: implizit
• Gilt für: Absolut positionierte Elemente
• Vererbt: Nein
• Prozentangaben: N/A
• Berechneter Wert: Wie angegeben
• Kanonische Reihenfolge: Gemäß Grammatik
• Animation: Diskret

Werte

/* Keyword values */
position-anchor: auto;

/* <dashed-ident> examples */
position-anchor: --anchor;
position-anchor: --my-anchor;
position-anchor: --myAnchor;

• auto: Verknüpft ein Ziel-Element mit seinem impliziten Anker. Ein impliziter Anker kann über das nicht standardmäßige globale Attribut anchor oder über die Popover API gefunden werden.
• <dashed-ident>: Der Name des gewünschten Anker-Elements. Der Wert wird als "gestrichelter Bezeichner" bezeichnet, da er wie bei CSS-Custom-Properties mit zwei Bindestrichen (–) beginnen muss, z. B. –my-anchor.

Grundlegende Verwendung

Im ersten Beispiel hat die alleinige Verwendung von position-anchor keine Auswirkung. Wir haben unserem .target-Element mitgeteilt, dass es an einem anderen Element verankert ist, das wir --my-anchor nennen. Aber welches Element repräsentiert --my-anchor? Das brauchen wir, sonst verankern wir uns an nichts, das tatsächlich existiert.

Der einfachste Weg, ein Element als "Anker" für andere Elemente zu definieren, ist, die Eigenschaft anchor-name dem Element zuzuweisen, das der Anker sein soll.

Nehmen wir an, wir haben zwei nicht verwandte Elemente in HTML

<div class="anchor">My Anchor</div>
<div class="target">My Target</div>

Wir möchten, dass das Element .anchor der Anker ist, und dann die Position des Elements .target basierend auf der Position des Elements .anchor festlegen.

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

.target {
  position: absolute; /* or position: fixed; */
  position-anchor: --my-anchor;
}

Das war's! Es besteht nun eine Verbindung zwischen den Elementen .anchor und .target. Wenn wir die Position des Elements .target ändern, wird seine Ausgangsbasis die Position des Elements .anchor sein.

Aber auch hier sehen wir in diesem Beispiel nicht viel. Das liegt daran, dass wir die Position des Elements .target noch nicht geändert haben, um diese Beziehung in Aktion zu sehen. Konzentrieren wir uns also auf zwei verschiedene Ansätze, um die Position dieses Elements zu aktualisieren: Verwendung der Funktion anchor() mit Inset-Eigenschaften oder Verwendung der Eigenschaft inset-area.

Methode 1: Funktion anchor() und Inset-Eigenschaften

Da das Element .target absolut positioniert ist, kann es mit Inset-Eigenschaften (top, right, bottom, left) verschoben werden. Es wäre ideal, unser .target neben dem .anchor zu positionieren, aber wie können wir wissen, wo sich das .anchor befindet, um die Inset-Eigenschaften zu nutzen? Die Funktion anchor macht genau das. Sie nimmt eine Seite des Ankers und gibt die <length> zurück, wo sie positioniert ist.

Jetzt können wir eine Seite von .target an eine andere Seite von .anchor anhängen.

.target {
  position: absolute;
  position-anchor: --my-anchor;

  top: anchor(bottom);
}

Das bedeutet im Grunde: "Heften Sie die obere Seite von .target an die untere Kante des Elements .anchor." Bilder sagen mehr als tausend Worte

Die Funktion anchor() verwendet den Standard-anchor, der mit dem target-Element verknüpft ist, aber wir können auch direkt auf einen anchor-name verweisen, wenn wir expliziter angeben, woran wir uns verankern.

.target {
  position: absolute;

  top: anchor(--my-anchor bottom);
}

...oder sogar auf andere Anker auf der Seite verweisen! Wir können beispielsweise dem Element .target sagen, dass es sich an das Element --my-anchor anheften soll, aber wir können es trotzdem basierend auf der Position eines beliebigen anderen Ankers auf der Seite positionieren, indem wir diesen einfach in der Funktion anchor() aufrufen.

.target {
  position: absolute;
  position-anchor: --my-anchor;

  top: anchor(--my-other-anchor bottom);
}

Methode 2: Eigenschaft inset-area

Vielleicht ist eine "einfachere" Methode, einen Anker neu zu positionieren, die Verwendung der Eigenschaft inset-area. Sie können sich ein imaginäres 3x3-Raster vorstellen, das das .anchor-Element umgibt.

Wir positionieren dann das .target-Element, an das es verankert ist, im Raster nach Spalte und Zeile, mit

• physischen Werten wie left, right, top und bottom,
• logischen Werten, die den aktuellen Schreibmodus berücksichtigen, wie start und end), und
• dem gemeinsamen Wert center.

Wenn wir zum Beispiel das .target-Element über zwei Felder in unserem imaginären Raster spannen wollten, könnten wir das Präfix span- für jeden Wert verwenden oder sogar das .target-Element über das gesamte Raster mit dem Wert span-all spannen.

.target {
  position: absolute;
  position-anchor: --my-anchor;

  inset-area: start center,
  /* or */
  inset-area: bottom left,
  /* or */
  inset-area: span-top right,
}

Demo

Spezifikation

Die Eigenschaft position-anchor ist in der Spezifikation CSS Anchor Positioning Module Level 1 definiert, die zum Zeitpunkt der Erstellung noch den Status eines Working Draft hat. Das bedeutet, dass sich zwischen jetzt und der offiziellen Candidate Recommendation für die Implementierung noch viel ändern kann. Seien Sie daher vorsichtig, wenn Sie die Eigenschaft auf einer Live-Website verwenden, bis die Spezifikation vom W3C übernommen und von den Browsern implementiert wurde.

Browser-Unterstützung

Umgang mit der Unterstützung älterer Browser

Die Ankerpositionierung ist ein relativ neues CSS-Modul, das noch keine vollständige Browserunterstützung hat und möglicherweise Probleme mit älteren Versionen aufweist. Sein häufigster Anwendungsfall sind verbesserte Tooltips. Daher ist unten ein Polyfill für ein einfaches Tooltip-Element zu finden. Es prüft, ob die Ankerpositionierung unterstützt wird, und erstellt einen klassischen Tooltip unterhalb unseres Anker-Elements.

@supports not (position-anchor: --my-anchor) {
  .target {
    display: none;
  }

  .anchor {
    position: relative;
    display: flex;
    justify-content: center;
  }

  .anchor::before {
    content: "My Target";
    position: absolute;
    top: 100%;
  }
}

Weitere Informationen und Tutorials

• "CSS Anchor Positioning" (CSSWG-Spezifikation)
• CSS Anchor Positioning in Practice (YouTube) (Miriam Suzanne und James Stuckey Weber)
• CSS Anchor Positioning in Practice (Notes) (Geoff Graham)
• “Introducing the CSS anchor positioning API” (Una Kravets)
• Anchor Positioning CodePen Collection (James Stuckey Weber)
• “CSS Stuff I’m Excited After the Last CSSWG Meeting” (Juan Diego Rodríguez)

Verwandt