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 dieser Wert weggelassen wird, wird der Standardanker des Elements verwendet, der in seiner position-anchor-Eigenschaft referenziert oder dem Element über das anchor-HTML-Attribut zugeordnet 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 Verwendung der position-anchor-CSS-Eigenschaft oder des anchor-HTML-Attributs ist weiterhin erforderlich, um die Zuordnung zu erstellen.

<anchor-side>

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

top

Der obere Rand des Ankerelements.

right

Der rechte Rand des Ankerelements.

bottom

Der untere Rand des Ankerelements.

left

Der linke Rand des Ankerelements.

inside

Die gleiche Seite wie die Inset-Eigenschaft.

outside

Die gegenüberliegende Seite der Inset-Eigenschaft.

start

Der logische Anfang des enthältenden Blocks des Ankerelements entlang der Achse der Inset-Eigenschaft, auf der die anchor()-Funktion gesetzt ist.

end

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

self-start

Der logische Anfang 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 in Prozent vom Anfang 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, zu dem die Funktion aufgelöst werden sollte, wenn die anchor()-Funktion ansonsten nicht gültig wäre.

Gibt einen <length>-Wert zurück.

Die anchor()-Funktion ermöglicht die Positionierung eines Elements relativ zu den Rändern eines Ankerelements. Sie ist nur innerhalb der auf absolut oder fest positionierten Elemente eingestellten Inset-Eigenschaftswerten gültig.

Sie liefert einen <length>-Wert, der den Abstand zwischen der durch den Inset-Wert angegebenen Ankerelementseite und der durch den gewählten <anchor-side>-Wert spezifizierten Ankerelementseite angibt. Da sie einen <length> zurückgibt, kann sie innerhalb anderer CSS-Funktionen, die Längenwerte akzeptieren, wie calc(), clamp() usw. verwendet werden.

Existiert kein Anker mit dem durch <anchor-name> angegebenen Namen oder hat das positionierte Element keinen Anker zugeordnet (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. Wenn zum Beispiel top: anchor(bottom, 50px) auf dem positionierten Element angegeben wurde, aber kein Anker ihm zugeordnet war, würde der Fallbackwert verwendet werden, sodass top einen berechneten Wert von 50px erhält.

Für detaillierte Informationen zu Ankereigenschaften und -verwendungen siehe die CSS Ankerpositionierungs- Modul-Übersichtsseite und die Verwendung von CSS Ankerpositionierung Anleitung.

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

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

Bei der Verwendung einer anchor()-Funktion innerhalb eines Inset-Eigenschaftswerts muss der innerhalb der anchor()-Funktion angegebene <anchor-side>-Parameter mit der Achse, auf der sich die Inset-Eigenschaft befindet, kompatibel sein.

Das bedeutet, dass physische <anchor-side>-Werte innerhalb der Werte physischer Inset-Eigenschaften verwendet werden können, wenn die Eigenschaft dieselbe Achsenrichtung wie der <anchor-side> hat. Mit anderen Worten, die top- und bottom-Seiten sind nicht innerhalb der left- und right-Eigenschaftswerte gültig, und die left- und right-Seiten sind nicht innerhalb der top- und bottom-Eigenschaftswerte gültig. Zum Beispiel ist top: anchor(bottom) in Ordnung, da sie beide vertikale Werte sind, aber top: anchor(left) ist nicht gültig, da left ein horizontaler Wert ist. Wenn top: anchor(left, 50px) angegeben ist, würde der Fallbackwert verwendet werden, sodass top einen berechneten Wert von 50px erhält. Wenn kein Fallback vorhanden ist, verhält sich die Inset-Eigenschaft, 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 einwandfrei.

Die Geschichte wird komplizierter, wenn physische <anchor-side>-Parameter innerhalb logischer Inset-Eigenschaftswerte verwendet werden, da die physische Seite mit der Achse übereinstimmen muss, für die die Inset-Eigenschaft relevant ist, innerhalb des aktuellen Schreibmodus. 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 nicht kompatibel. Wenn inset-block-end: anchor(left, 50px) gesetzt wäre, würde der berechnete Wert 50px betragen, und das positionierte Element würde 50px vom Blockende (unten) seines nächstgelegenen positionierten Vorfahren oder des Viewports entfernt positioniert, abhängig vom gesetzten position-Wert.
• 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 nicht kompatibel. Wenn inset-block-end: anchor(top, 50px) gesetzt wäre, würde der berechnete Wert 50px betragen, und das positionierte Element würde 50px vom Blockende (links oder rechts, abhängig vom Schreibmodus) seines nächstgelegenen positionierten Vorfahren oder des Viewports entfernt positioniert, abhängig vom gesetzten position-Wert.

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

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

Die folgende Tabelle listet die Inset-Eigenschaften auf und die <anchor-side>-Parameterwerte, die mit ihnen kompatibel sind. Wir haben nur die Langversionen der Inset-Eigenschaften aufgelistet; diese bestehen aus den Kurzschreibweise-Werten der Inset-Eigenschaften.

Wenn sich die anchor()-Funktion auf eine Seite des Standardankers bezieht, können Sie eine margin hinzufügen, um bei Bedarf Platz 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 Platz hinzuzufügen.

Dieses Beispiel positioniert den rechten Rand des positionierten Elements bündig mit dem linken Rand des Ankerelements und fügt dann einen Rand hinzu, um etwas Platz zwischen den Rändern zu schaffen:

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

Dieses Beispiel positioniert den logischen Block-Endrand des positionierten Elements 10px vom logischen Block-Anfang der Ankerelemente entfernt:

.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 zu erstellen, wie z.B. Ziehhände an den Ecken eines positionierten Elements, die zur Größenanpassung 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 verbunden, der über seine position-anchor-Eigenschaft (oder das anchor-HTML-Attribut) definiert ist. Dies ist der Anker, mit dem das Element scrollt, wenn die Seite scrollt; er kann auch verwendet werden, um zu steuern, wann das Element bedingt versteckt 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 anchor-positionierten Elements auf die Höhe seines Ankers einzustellen, indem die unteren und oberen Ränder auf die unteren und oberen Ränder des Ankers gesetzt werden. Die anchor()-Funktion innerhalb einer calc()-Funktion wird dann verwendet, um das anchor-positionierte Element von seinem Anker abzusetzen.

HTML

Wir fügen ein <div>-Element hinzu, das wir als unseren Anker festlegen 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 Wert der position-anchor-Eigenschaft des positionierten Elements, um die Elemente zu verknüpfen, und setzen dann drei Inset-Eigenschaften auf dem anchor-positionierten Element. Die ersten beiden positionieren den oberen Rand des Elements bündig mit dem oberen Rand des Ankers und den unteren Rand bündig mit dem unteren Rand des Ankers. In der dritten Inset-Eigenschaft wird die anchor()-Funktion innerhalb einer calc()-Funktion verwendet, um den linken Rand des Elements 10px rechts vom Rand 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

Dieses Beispiel zeigt ein Element, das relativ zu einem Anker über seine top- und left-Eigenschaften positioniert ist, die mit anchor()-Funktionen definiert sind. Es enthält auch zwei Dropdown-Menüs, die es Ihnen ermöglichen, die <anchor-side>-Werte innerhalb dieser anchor()-Funktionen zu ändern, 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 sind als Ankerelement und als das zu positionierende Element, das wir damit verknüpfen werden, gedacht.

Wir fügen auch etwas Fülltext um die beiden <div>-Elemente herum hinzu, um das <body>-Element größer zu machen, sodass es scrollt. Dieses Beispiel enthält auch zwei <select>-Elemente, um die Dropdown-Menüs zu erstellen, mit denen die verschiedenen <anchor-side>-Werte ausgewählt werden können, um sie zu platzieren. Wir haben den Fülltext und die <select>-Elemente der Kürze halber 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>-Element als Ankerelement, indem wir einen Ankernamen darauf über die anchor-name-Eigenschaft setzen. Wir verknüpfen es dann mit dem positionierten Element, indem wir denselben Wert für seine position-anchor-Eigenschaft setzen. top: anchor(--my-anchor bottom) positioniert den oberen Rand der Infobox bündig mit dem unteren Rand ihres Ankers, während left: anchor(right) den linken Rand der Infobox bündig mit dem rechten Rand ihres Ankers positioniert. Dies stellt eine Anfangsposition bereit, die beim Auswählen verschiedener Werte aus den Dropdown-Boxen überschrieben wird.

.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: --my-anchor;
}

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

JavaScript

Wir lauschen dem change-Ereignis, das beim Auswählen eines neuen <anchor-side>-Wertes auftritt, und setzen den ausgewählten Wert als <anchor-side> in der anchor()-Funktion innerhalb des relevanten Inset-Eigenschaftswerts (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(--my-anchor ${anchorSide})`;
});

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

Ergebnis

Wählen Sie unterschiedliche Werte aus den Dropdown-Boxen aus, um zu sehen, wie sie sich auf die Positionierung der Infobox auswirken.

Dieses Beispiel positioniert ein Element relativ zu zwei verschiedenen Ankern, die verwendet werden, um die Position der oberen linken und unteren rechten Ecken des anchor-positionierten Elements einzustellen. Die Anker können über Tastatursteuerungen oder durch Ziehen bewegt werden, was die Größe des positionierten Elements ändert.

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 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 einen anderen anchor-name-Wert, einen position-Wert von absolute und unterschiedliche Inset-Werte, um die Anker in einer rechteckigen Formation zu positionieren.

.anchor {
  position: absolute;
}

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

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

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

.infobox {
  position-anchor: --my-anchor1;
  position: fixed;
  top: anchor(--my-anchor1 100%);
  left: anchor(--my-anchor1 100%);
  bottom: anchor(--my-anchor2 0%);
  right: anchor(--my-anchor2 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 tabben 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 infolgedessen 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-Anker-Positionierung Anleitung
• Fallback-Optionen und bedingtes Verbergen bei Überlauf Anleitung
• CSS-Anker-Positionierungsmodul