anchor()

Die Syntax der anchor()-Funktion ist wie folgt:

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

Die Parameter sind:

<anchor-name> Optional

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

Hinweis: Die Angabe eines <anchor-name> innerhalb einer anchor()-Funktion verknüpft ein Element nicht mit einem Anker; es positioniert das Element nur relativ zu diesem Anker. Die position-anchor CSS-Eigenschaft oder das anchor HTML-Attribut wird immer noch benötigt, um die Verknüpfung herzustellen.

<anchor-side>

Gibt die Seite des Ankers oder den relativen Abstand von der start-Seite an, zu der das Element relativ positioniert ist. Wenn ein physischer oder logischer Wert verwendet wird, der nicht kompatibel mit der Inset-Eigenschaft ist, auf der anchor() gesetzt ist, wird der Fallback-Wert verwendet. Gültige Werte umfassen:

top

Die Oberseite des Ankerelements.

right

Die rechte Seite des Ankerelements.

bottom

Die Unterseite des Ankerelements.

left

Die linke Seite des Ankerelements.

inside

Die gleiche Seite wie die Inset-Eigenschaft.

outside

Die gegenüberliegende Seite der Inset-Eigenschaft.

start

Der logische Start des Ankerelements des Enthaltenden Blocks entlang der Achse der Inset-Eigenschaft, auf der die anchor()-Funktion gesetzt ist.

end

Das logische Ende des Ankerelements des Enthaltenden Blocks entlang der Achse der Inset-Eigenschaft, auf der die anchor()-Funktion gesetzt ist.

self-start

Der logische Start des Inhalts des Ankerelements entlang der Achse der Inset-Eigenschaft, auf der die anchor()-Funktion gesetzt ist.

self-end

Das logische Ende des Inhalts des Ankerelements entlang der Achse der Inset-Eigenschaft, auf der die anchor()-Funktion gesetzt ist.

center

Das Zentrum der Achse der Inset-Eigenschaft, auf der die anchor()-Funktion gesetzt ist.

<percentage>

Gibt den Abstand als Prozentsatz vom Start des Inhalts des Elements entlang der Achse der Inset-Eigenschaft an, auf der die anchor()-Funktion gesetzt ist.

<length-percentage> Optional

Gibt einen Fallback-Wert an, auf den die Funktion aufgelöst werden soll, falls die anchor()-Funktion sonst nicht gültig wäre.

Gibt einen <length> Wert zurück.

Die anchor()-Funktion ermöglicht die Positionierung eines Elements relativ zu den Kanten eines Ankerelements. Sie ist nur innerhalb von Inset-Eigenschaftswerten gültig, die auf absolut oder fest positionierten Elementen gesetzt sind.

Sie gibt einen <length>-Wert zurück, der den Abstand zwischen der durch den Inset-Wert spezifizierten Seite des anker-positionierten Elements und der durch den gewählten <anchor-side>-Wert spezifizierten Seite des Ankerelements angibt. Da sie einen <length> zurückgibt, kann sie innerhalb anderer CSS-Funktionen verwendet werden, die Längenwerte akzeptieren, einschließlich calc(), clamp() usw.

Wenn kein Anker mit dem durch den <anchor-name> spezifizierten Namen existiert oder das positionierte Element keinen mit ihm verbundenen Anker hat (d.h. über die position-anchor-Eigenschaft), wird der erste Parameter als ungültig betrachtet und der Fallback-<length-percentage>-Wert wird verwendet, falls einer verfügbar ist. Zum Beispiel, wenn top: anchor(bottom, 50px) auf dem positionierten Element spezifiziert wäre, jedoch kein Anker damit verbunden wäre, würde der Fallback-Wert verwendet, sodass top einen berechneten Wert von 50px erhalten würde.

Für detaillierte Informationen zu Ankerfunktionen und -anwendungen siehe das CSS Anchor Positioning Modul und den Leitfaden Using CSS Anchor Positioning.

Die CSS-Inset-Eigenschaften, die eine anchor()-Funktion als Wertkomponente akzeptieren, umfassen:

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

Beim Einsatz einer anchor()-Funktion innerhalb eines Inset-Eigenschaftswerts muss der innerhalb der anchor()-Funktion spezifizierte <anchor-side>-Parameter mit der Achse, auf der die Inset-Eigenschaft liegt, kompatibel sein.

Das bedeutet, dass physische <anchor-side>-Werte innerhalb der Werte von physischen Inset-Eigenschaften verwendet werden können, wenn die Eigenschaft die gleiche Achsenrichtung wie der <anchor-side>-Wert hat. Mit anderen Worten, die Seiten top und bottom sind nicht innerhalb der Werte von left und right gültig und umgekehrt. Zum Beispiel ist top: anchor(bottom) in Ordnung, da beide vertikale Werte sind, aber top: anchor(left) ist nicht gültig, da left ein horizontaler Wert ist. Wenn top: anchor(left, 50px) spezifiziert wäre, würde der Fallback-Wert verwendet, sodass top einen berechneten Wert von 50px erhalten würde. Wenn kein Fallback vorhanden ist, verhält sich die Inset-Eigenschaft so, als wäre sie auf auto gesetzt.

Sie können logische <anchor-side>-Werte sowohl innerhalb logischer als auch physischer Inset-Eigenschaften verwenden, da logische <anchor-side>-Werte relativ zur relevanten Achse der Inset-Eigenschaft sind, unabhängig davon, ob die Eigenschaft logisch oder relativ ist. Zum Beispiel funktionieren top: anchor(start), top: anchor(self-end), inset-block-start: anchor(end) und inset-inline-end: anchor(self-start) alle gut.

Die Situation wird komplizierter, wenn physische <anchor-side>-Parameter innerhalb logischer Inset-Eigenschaftswerte verwendet werden, da die physische Seite zur Achse passen muss, auf die die Inset-Eigenschaft im aktuellen Schreibmodus relevant ist. Zum Beispiel:

• In einem horizontalen Schreibmodus ist die Blockrichtung von oben nach unten, daher funktioniert inset-block-end: anchor(bottom) aber inset-block-end: anchor(left) ist unvereinbar. Wenn inset-block-end: anchor(left, 50px) angegeben wurde, würde der berechnete Wert 50px betragen, und das positionierte Element würde 50px vom Blockende (unten) seines nächsten positionierten Vorfahren oder des Viewports, abhängig vom gesetzten position-Wert, positioniert.
• In einem vertikalen Schreibmodus ist die Blockrichtung von rechts nach links oder von links nach rechts, daher funktioniert inset-block-end: anchor(left), aber inset-block-end: anchor(top) ist unvereinbar. Wenn inset-block-end: anchor(top, 50px) angegeben wurde, würde der berechnete Wert 50px betragen, und das positionierte Element würde 50px vom Blockende (links oder rechts, je nach Schreibmodus) seines nächsten positionierten Vorfahren oder des Viewports, abhängig vom gesetzten position-Wert, positioniert.

Um die potenzielle Verwirrung mit diesen Werten zu mildern, wird empfohlen, logische Inset-Eigenschaften mit logischen <anchor-side>-Werten und physische Inset-Eigenschaften mit physischen <anchor-side>-Werten zu verwenden. Sie sollten die Verwendung logischer Werte bevorzugen, wann immer es möglich ist, da sie besser für die Internationalisierung geeignet sind.

Die Werte center und <percentage> sind innerhalb der anchor()-Funktion in allen logischen und physischen Inset-Eigenschaften gültig.

Die nachstehende Tabelle listet die Inset-Eigenschaften und die <anchor-side>-Parameterwerte auf, die mit ihnen kompatibel sind. Wir haben nur die Langform-Inset-Eigenschaften aufgelistet; diese umfassen die Werte der Kurzform-Inset-Eigenschaft.

Wenn die anchor()-Funktion auf eine Seite des Standardankers verweist, können Sie einen margin hinzufügen, um bei Bedarf Abstände zwischen den Rändern des Ankers und des positionierten Elements zu schaffen. Alternativ können Sie die anchor()-Funktion innerhalb einer calc()-Funktion verwenden, um Abstände hinzuzufügen.

Dieses Beispiel positioniert die rechte Kante des positionierten Elements bündig zur linken Kante des Ankerelements und fügt dann einen Abstand hinzu, um etwas Platz zwischen den Kanten zu schaffen:

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

Dieses Beispiel positioniert die logische Blockendkante des positionierten Elements 10px von der logischen Blockstartkante des Ankerelements:

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

Sie können ein Element relativ zu mehreren Ankern positionieren, indem Sie unterschiedliche <anchor-name>-Werte innerhalb der anchor()-Funktion verschiedener Inset-Eigenschaften auf demselben Element angeben (siehe Element positioniert relativ zu mehreren Ankern unten). Dies kann verwendet werden, um nützliche Funktionen wie Ziehgriffe an den Ecken eines positionierten Elements zu erstellen, die zum Ändern der Größe verwendet werden können.

Während ein positioniertes Element relativ zu mehr als einem Ankerelement positioniert werden kann, ist es immer nur mit dem einzelnen Anker verknüpft, der über seine position-anchor-Eigenschaft (oder das anchor-HTML-Attribut) definiert wird. Dies ist der Anker, mit dem das Element bei einem Bildlauf mit dem Anker scrollt; er kann auch verwendet werden, um zu steuern, wann das Element bedingt ausgeblendet wird.

<anchor()> = 
  anchor( <anchor-name>?                  &&
  <anchor-side> , <length-percentage>? )  

<anchor-name> = 
  <dashed-ident>  

<anchor-side> = 
  inside        |
  outside       |
  top           |
  left          |
  right         |
  bottom        |
  start         |
  end           |
  self-start    |
  self-end      |
  <percentage>  |
  center        

<length-percentage> = 
  <length>      |
  <percentage>  

In diesem Beispiel wird die anchor()-Funktion verwendet, um die Höhe eines anker-positionierten Elements auf die Höhe seines Ankers zu setzen, indem die unteren und oberen Kanten auf die unteren und oberen Kanten des Ankers gesetzt werden. Die anchor()-Funktion innerhalb einer calc()-Funktion wird dann verwendet, um das anker-positionierte Element von seinem Anker zu versetzen.

HTML

Wir binden ein <div>-Element ein, das wir als unseren Anker setzen werden, und ein <p>-Element, das wir relativ zu diesem Anker positionieren werden:

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

<p class="positionedElement">This is a positioned element.</p>

CSS

Wir setzen den anchor-name-Wert des Ankerelements als den Wert der position-anchor-Eigenschaft des positionierten Elements, um die Elemente zu verknüpfen, und setzen dann drei Inset-Eigenschaften auf dem anker-positionierten Element. Die ersten beiden positionieren die obere Kante des Elements bündig zur oberen Kante des Ankers und die untere Kante bündig zur unteren Kante des Ankers. In der dritten Inset-Eigenschaft wird die anchor()-Funktion innerhalb einer calc()-Funktion verwendet, um die linke Kante des Elements 10px von der rechten Kante des Ankers zu positionieren.

.anchor {
  anchor-name: --infobox;
  background: palegoldenrod;
  font-size: 3em;
  width: fit-content;
  border: 1px solid goldenrod;
}

.positionedElement {
  position: absolute;
  position-anchor: --infobox;
  margin: 0;
  top: anchor(top);
  left: calc(anchor(right) + 10px);
  bottom: anchor(bottom);
  background-color: olive;
  border: 1px solid darkolivegreen;
}

Ergebnisse

In diesem Beispiel wird ein Element relativ zu einem Anker über seine top- und left-Eigenschaften positioniert, die mithilfe von anchor()-Funktionen definiert sind. Es enthält außerdem zwei Dropdown-Menüs, die es ermöglichen, die <anchor-side>-Werte innerhalb dieser anchor()-Funktionen zu variieren, sodass Sie sehen können, welchen Effekt sie haben.

HTML

Wir spezifizieren zwei <div>-Elemente, eines mit einer Klasse von anchor und eines mit einer Klasse von infobox. Diese sollen als das Ankerelement und das positionierte Element, das wir damit verknüpfen werden, dienen.

Wir fügen auch etwas Fülltext um die beiden <div>-Elemente herum hinzu, um die <body> höher zu machen, sodass sie scrollt. Dieses Beispiel enthält auch zwei <select>-Elemente, um die Dropdown-Menüs zu erstellen, die die Auswahl verschiedener <anchor-side>-Werte ermöglichen, mit denen das positionierte Element platziert wird. Wir haben den Fülltext und die <select>-Elemente zur Kürze ausgeblendet.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

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

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

<p>
  Nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. In arcu
  cursus euismod quis viverra nibh cras pulvinar. Vulputate ut pharetra sit amet
  aliquam.
</p>

<p>
  Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Vel elit
  scelerisque mauris pellentesque pulvinar pellentesque habitant morbi
  tristique. Porta lorem mollis aliquam ut porttitor. Turpis cursus in hac
  habitasse platea dictumst quisque. Dolor sit amet consectetur adipiscing elit.
  Ornare lectus sit amet est placerat. Nulla aliquet porttitor lacus luctus
  accumsan.
</p>

<form>
  <div>
    <label for="top-anchor-side">
      Choose a vertical <code>anchor()</code> value:
    </label>
    <select id="top-anchor-side" name="top-anchor-side">
      <option value="top">top: anchor(top)</option>
      <option value="bottom" selected>top: anchor(bottom)</option>
      <option value="start">top: anchor(start)</option>
      <option value="end">top: anchor(end)</option>
      <option value="center">top: anchor(center)</option>
      <option value="0%">top: anchor(0%)</option>
      <option value="25%">top: anchor(25%)</option>
      <option value="50%">top: anchor(50%)</option>
      <option value="75%">top: anchor(75%)</option>
      <option value="100%">top: anchor(100%)</option>
    </select>
  </div>
  <div>
    <label for="left-anchor-side">
      Choose a horizontal <code>anchor()</code> value:
    </label>
    <select id="left-anchor-side" name="left-anchor-side">
      <option value="left">left: anchor(left)</option>
      <option value="right" selected>left: anchor(right)</option>
      <option value="self-start">left: anchor(self-start)</option>
      <option value="self-end">left: anchor(self-end)</option>
      <option value="center">left: anchor(center)</option>
      <option value="0%">left: anchor(0%)</option>
      <option value="25%">left: anchor(25%)</option>
      <option value="50%">left: anchor(50%)</option>
      <option value="75%">left: anchor(75%)</option>
      <option value="100%">left: anchor(100%)</option>
    </select>
  </div>
</form>

CSS

Wir deklarieren das anchor-<div> als ein Ankerelement, indem wir einen Ankernamen daran über die anchor-name-Eigenschaft setzen. Dann verknüpfen wir es mit dem positionierten Element, indem wir denselben Wert für seine position-anchor-Eigenschaft setzen. top: anchor(--myAnchor bottom) positioniert die obere Kante der Infobox bündig zur unteren Kante ihres Ankers, während left: anchor(right) die linke Kante der Infobox bündig zur rechten Kante ihres Ankers positioniert. Dies liefert eine Anfangsposition, die überschrieben wird, wenn andere Werte aus den Dropdown-Menüs ausgewählt werden.

.anchor {
  font-size: 2rem;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: hsl(240 100% 75%);
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  border-radius: 10px;
  border: 1px solid black;
  padding: 3px;
}

body {
  width: 80%;
  margin: 0 auto;
}

form {
  background: white;
  border: 1px solid black;
  padding: 5px;
  position: fixed;
  top: 0;
  right: 2px;
}

select {
  display: block;
  margin-top: 5px;
}

form div:last-child {
  margin-top: 10px;
}

.infobox {
  color: darkblue;
  background-color: azure;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 1rem;
}

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

.infobox {
  position: fixed;
  position-anchor: --myAnchor;
  top: anchor(--myAnchor bottom);
  left: anchor(right);
}

JavaScript

Wir horchen auf das change-Ereignis, das auftritt, wenn ein neuer <anchor-side>-Wert ausgewählt wird, und setzen den ausgewählten Wert als <anchor-side> in der anchor()-Funktion innerhalb der relevanten Inset-Eigenschaft (top oder left) der Infobox.

const infobox = document.querySelector(".infobox");
const topSelect = document.querySelector("#top-anchor-side");
const leftSelect = document.querySelector("#left-anchor-side");

topSelect.addEventListener("change", (e) => {
  const anchorSide = e.target.value;
  infobox.style.top = `anchor(--myAnchor ${anchorSide})`;
});

leftSelect.addEventListener("change", (e) => {
  const anchorSide = e.target.value;
  infobox.style.left = `anchor(${anchorSide})`;
});

Ergebnis

Wählen Sie verschiedene Werte aus den Dropdown-Menüs, um zu sehen, wie sie die Positionierung der Infobox beeinflussen.

Dieses Beispiel positioniert ein Element relativ zu zwei verschiedenen Ankern, die verwendet werden, um die Position der oberen linken und unteren rechten Ecken des anker-positionierten Elements festzulegen. Die Anker können über Tastatursteuerungen bewegt oder gezogen werden, um das positionierte Element zu vergrößern oder zu verkleinern.

HTML

Wir spezifizieren insgesamt drei <div>-Elemente. Die ersten beiden haben eine Klasse von anchor und werden als Anker definiert; jedes hat eine individuelle id, die verwendet wird, um ihnen unterschiedliche Positionierungsinformationen zu geben. Das letzte <div> hat eine Klasse von infobox und wird als das positionierte Element definiert. Wir fügen das tabindex-Attribut hinzu, um ihnen das Empfangen von Tastaturfokus zu ermöglichen.

<div id="anchor1" class="anchor" tabindex="0">⚓︎1</div>

<div id="anchor2" class="anchor" tabindex="0">⚓︎2</div>

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

CSS

body {
  width: 150vw;
  height: 150vh;
}

.anchor {
  font-size: 1rem;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: hsl(240 100% 75%);
  width: fit-content;
  border-radius: 10px;
  border: 1px solid black;
  padding: 3px;
  &:focus {
    background-color: hsl(60 100% 75%);
  }
}

.infobox {
  color: darkblue;
  background-color: azure;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 1rem;
}

Die Anker erhalten jeweils einen anderen anchor-name-Wert, einen position-Wert von absolute und verschiedene Inset-Werte, um die Anker in einer Rechteckformation zu positionieren.

.anchor {
  position: absolute;
}

#anchor1 {
  anchor-name: --myAnchor1;
  top: 50px;
  left: 100px;
}

#anchor2 {
  anchor-name: --myAnchor2;
  top: 200px;
  left: 350px;
}

Das anker-positionierte Element, mit position auf fixed gesetzt, ist mit einem Anker über seine position-anchor-Eigenschaft verknüpft. Es wird relativ zu zwei Ankern positioniert, indem zwei verschiedene <anchor-name>-Werte mit den anchor()-Funktionen auf seinen Inset-Eigenschaften gesetzt werden. In diesem Fall haben wir <percentage>-Werte für den <anchor-side>-Parameter verwendet, die den Abstand vom Start der Achse der Inset-Eigenschaft angeben, auf der die Funktion gesetzt ist.

.infobox {
  position-anchor: --myAnchor1;
  position: fixed;
  top: anchor(--myAnchor1 100%);
  left: anchor(--myAnchor1 100%);
  bottom: anchor(--myAnchor2 0%);
  right: anchor(--myAnchor2 0%);
}

// grab all the anchors and make each one draggable
const anchors = document.querySelectorAll(".anchor");
anchors.forEach((anchor) => makeDraggable(anchor));

function makeDraggable(elem) {
  let pos1, pos2, pos3, pos4;

  elem.onmousedown = dragMouseDown;
  elem.addEventListener("keyup", (e) => {
    switch (e.key) {
      case "d":
        elem.style.left = `${elem.offsetLeft + 5}px`;
        break;
      case "a":
        elem.style.left = `${elem.offsetLeft - 5}px`;
        break;
      case "w":
        elem.style.top = `${elem.offsetTop - 5}px`;
        break;
      case "s":
        elem.style.top = `${elem.offsetTop + 5}px`;
        break;
    }
    e.preventDefault();
  });

  function elementMove(e) {
    console.dir(e);
    // calculate the new cursor position:
    pos1 = pos3 - e.offsetLeft;
    pos2 = pos4 - e.offsetTop;
    pos3 = e.offsetLeft;
    pos4 = e.offsetTop;
    // set the element's new position:
    elem.style.top = `${elem.offsetTop - pos2}px`;
    elem.style.left = `${elem.offsetLeft - pos1}px`;
  }

  function dragMouseDown(e) {
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the mouse moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elem.style.top = `${elem.offsetTop - pos2}px`;
    elem.style.left = `${elem.offsetLeft - pos1}px`;
  }

  function closeDragElement() {
    // stop moving when mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

Ergebnis

Das positionierte Element wird relativ zu beiden Ankerelementen positioniert. Ziehen Sie sie mit der Maus oder navigieren Sie zu ihnen und verwenden Sie die Tasten W, A, S und D, um sie nach oben, unten, links und rechts zu bewegen. Beobachten Sie, wie sich ihre Position ändert und folglich die Fläche des positionierten Elements. Scrollen Sie, um zu sehen, wie die Positionen aller Elemente beibehalten werden.

• position-anchor
• position-area
• anchor-size() Funktion
• Verwendung von CSS Anchor Positionierung Leitfaden
• Fallback-Optionen und bedingtes Ausblenden für Überläufe Leitfaden
• CSS Anchor Positionierung Modul