CSS/Funktionen/anchor()

Browserunterstützung
caniuse.com

Die CSS-Funktion anchor() kann innerhalb der Werte der inset-Eigenschaft eines Elements mit Ankerposition verwendet werden und gibt einen Längenwert zurück, der sich auf die Position des zugehörigen Ankerelements bezieht.

anwendbar auf

 

Parameter

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

• optionaler anchor-name des Ankerelements, relativ zu dem die Seite des Elements positioniert werden soll.
  Wenn dieser Wert weggelassen wird, wird der Standardanker des Elements verwendet, auf den in der Eigenschaft position-anchor verwiesen wird.
• <anchor-side> - Gibt die Seite des Ankers oder den relativen Abstand von der Startseite an, relativ zu der das Element positioniert ist.
  • top, right, bottom, left
  • inside, outside, self-start, self-end, center
  • Prozentwert
• optionaler Prozentwert als Fallback

Beispiel

/* side or percentage */
top: anchor(bottom);
top: anchor(50%);
top: calc(anchor(bottom) + 10px)
inset-block-end: anchor(start);

/* side of named anchor */
top: anchor(--my-anchor bottom);
inset-block-end: anchor(--my-anchor start);

/* side of named anchor with fallback */
top: anchor(--my-anchor bottom, 50%);
inset-block-end: anchor(--my-anchor start, 200px);
left: calc(anchor(--my-anchor right, 0%) + 10px);

 

Beachten Sie: Die Angabe eines <anchor-name> innerhalb einer anchor()-Funktion verknüpft ein Element nicht mit einem Anker, sondern positioniert das Element lediglich relativ zu diesem Anker. Die CSS-Eigenschaft position-anchor ist weiterhin erforderlich, um die Verknüpfung herzustellen.

Siehe auch

• Infobox
  • Anchor positioning

Weblinks

• CSSWG: #anchor-pos
• MDN: anchor()
• Browser-Support: caniuse.com