Anchor-name | CSS-Tricks

CSS Almanac → Eigenschaften → A → anchor-name

Geoff Graham am 5. Aug. 2024

Die Deklaration der CSS-Eigenschaft anchor-name für ein Element registriert dieses als einen „Anker“, den wir als Referenz für die Positionierung anderer Elemente verwenden können.

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

Die Eigenschaft ist ein Teil von CSS Anchor Positioning, einer Reihe von Funktionen zum Verknüpfen der Position eines Elements mit einem anderen, die zusammen verwendet werden sollen.

Syntax

anchor-name: none | <dashed-ident>#

Initialwert: none
Gilt für: Alle Elemente, die eine Hauptbox generieren.
Vererbt: Nein
Prozentangaben: N/A
Berechneter Wert: Wie angegeben
Kanonische Reihenfolge: Gemäß Grammatik
Animation: Diskret

Eigenschaftswerte

/* Keyword values */
anchor-name: none;

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

none: Entfernt die Ankerpositionierung vom Element, auf das sie angewendet wird. Mit anderen Worten, andere Elemente können nicht in Bezug auf es positioniert werden.
<dashed-ident>: Ein benutzerdefinierter Name, der einem als Anker vorgesehenen Element zugewiesen wird, ähnlich wie bei einem <custom-ident>, der es deklarativ identifiziert und von anderen Ankern unterscheidet. Der Wert wird als „dashed“ Ident bezeichnet, da er genau wie bei CSS Custom Properties mit zwei Bindestrichen (--) vorangestellt werden muss, z.B. --my-anchor.

Grundlegende Verwendung

Sobald wir ein Element als Anker registriert haben, können wir es auf einem anderen Element referenzieren und dieses Element relativ zur Position des Ankers positionieren. Dies bezieht also ein ausgewähltes „Ziel“-Element auf den gerade definierten Anker.

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

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

Aber bevor wir das tun, müssen wir dem .target eine absolute Positionierung geben, um es aus dem normalen Dokumentfluss zu entfernen.

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

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

Mit dieser Grundlage können wir mit der Positionierung des .target beginnen. Seine Position ist nun relativ zum Fluss des .anchor-Elements. Wir könnten zum Beispiel das .target relativ zur unteren Kante des .anchor mit der anchor()-Funktion positionieren.

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

.target {
  position: absolute;
  position-anchor: --my-anchor;
  top: anchor(bottom);
}

Das ist so ähnlich, als würde man sagen: „Ich möchte die Oberseite meines Elements entlang der Unterkante dieses anderen Elements positionieren.“ Und das Ergebnis ist, dass sich das .target unterhalb des .anchor befindet.

Two boxes stacked vertically, the top one labeled anchor and the bottom one labeled target.

Wenn wir stattdessen zur oberen Kante des .anchor wechseln würden

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

.target {
  position: absolute;
  position-anchor: --my-anchor;
  bottom: anchor(top);
}

Two boxes stacked vertically, the top one labeled target and the bottom one labeled anchor.

Referenzieren von Ankernamen

Wir haben gerade die grundlegende Verwendung gesehen, wie wir einen „Anker“ registrieren können, indem wir anchor-name auf dem Element deklarieren, auf das wir uns beziehen, und dann ein „Ziel“-Element mit diesem Anker verknüpfen, indem wir den anchor-name auf dem Ziel mit der position-anchor-Eigenschaft referenzieren.

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

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

Eine weitere Möglichkeit, das Ziel mit dem Anker zu verknüpfen, besteht darin, den anchor-name direkt in der anchor()-Funktion zu referenzieren.

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

.target {
  top: anchor(--my-anchor end);
}

Das ist eine gute Möglichkeit, den Codeaufwand zu reduzieren, da wir den Anker und die Art und Weise, wie wir das Ziel daran positionieren wollen, in einer einzigen Deklaration referenzieren können.

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

.target {
  top: anchor(--my-anchor end);

  /* Same as: */
  position-anchor: --my-anchor;
  top: anchor(end);
}

Referenzieren mehrerer Ankernamen

Ja, wir können ein Zielelement definitiv mit vielen verschiedenen Ankern verknüpfen.

.target {
  position: absolute;
  top: anchor(--anchor-1 bottom);
  bottom: anchor(--anchor-2 top);
  left: anchor(--anchor-3 right);
  right: anbchor(--anchor-4 left);
}

Das ist vielleicht nicht in jeder Situation die beste Idee, da es effektiv die Position des Ziels über mehrere andere Elemente auf der Seite erstreckt und ihm unterschiedliche Dimensionen und Formen ermöglicht.

Spezifikation

Die Eigenschaft anchor-name ist im CSS Anchor Positioning Module Level 1-Standard definiert, der zum Zeitpunkt der Erstellung noch den Status eines Working Draft hat. Das bedeutet, dass sich zwischen jetzt und der formellen Empfehlung für die Implementierung noch viel ändern kann.