anchor()

Syntax

/* 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);

Parameter

Die Syntax der anchor() Funktion ist wie folgt:

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

Die Parameter sind:

<anchor-name> Optional

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

Hinweis: Das Angeben eines <anchor-name> innerhalb einer anchor() Funktion verknüpft ein Element nicht mit einem Anker; es positioniert nur das Element relativ zu diesem Anker. Die position-anchor CSS-Eigenschaft oder das anchor HTML-Attribut sind weiterhin erforderlich, um die Zuordnung zu erstellen.

<anchor-side>

Gibt die Seite des Ankers an oder die relative Entfernung von der start Seite, zu der das Element positioniert ist. Wenn ein physikalischer oder logischer Wert verwendet wird, der nicht kompatibel mit der inset-Eigenschaft ist, für die anchor() eingestellt ist, wird der Fallback-Wert verwendet. Gültige Werte sind:

top

Die obere Seite des Ankerelements.

right

Die rechte Seite des Ankerelements.

bottom

Die untere Seite des Ankerelements.

left

Die linke Seite des Ankerelements.

inside

Die gleiche Seite wie die inset-Eigenschaft.

outside

Die entgegengesetzte Seite der inset-Eigenschaft.

start

Der logische Start des containenden Blocks des Ankerelements entlang der Achse der inset-Eigenschaft, für die die anchor() Funktion eingestellt ist.

end

Das logische Ende des containenden Blocks des Ankerelements entlang der Achse der inset-Eigenschaft, für die die anchor() Funktion eingestellt ist.

self-start

Der logische Start des Inhalts des Ankerelements entlang der Achse der inset-Eigenschaft, für die die anchor() Funktion eingestellt ist.

self-end

Das logische Ende des Inhalts des Ankerelements entlang der Achse der inset-Eigenschaft, für die die anchor() Funktion eingestellt ist.

center

Das Zentrum der Achse der inset-Eigenschaft, für die die anchor() Funktion eingestellt ist.

<percentage>

Gibt die Entfernung in Prozent vom Start des Inhalts des Elements entlang der Achse der inset-Eigenschaft an, für die die anchor() Funktion eingestellt ist.

<length-percentage> Optional

Gibt einen Fallback-Wert an, den die Funktion zur Auflösung verwenden soll, wenn die anchor() Funktion sonst nicht gültig wäre.

Rückgabewert

Gibt einen <length> Wert zurück.

Beschreibung

Die anchor() Funktion ermöglicht es, ein Element relativ zu den Kanten eines Ankerelements zu positionieren. Sie ist nur innerhalb von inset property Werten gültig, die auf absolut oder fixierten Positionselementen eingestellt sind.

Sie gibt einen <length> Wert zurück, der die Entfernung zwischen der durch den inset-Wert spezifizierten Seite des anchor-positioned Elements und der Seite des Ankerelements angibt, die durch den ausgewählten <anchor-side> Wert spezifiziert ist. Da sie einen <length> zurückgibt, kann sie innerhalb anderer CSS-Funktionen verwendet werden, die Längenwerte akzeptieren, wie calc(), clamp() usw.

Falls kein Anker mit dem durch <anchor-name> spezifizierten Namen existiert oder das positionierte Element keinen zugehörigen 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, wenn einer vorhanden ist. Zum Beispiel, wenn top: anchor(bottom, 50px) auf dem positionierten Element spezifiziert wäre, aber 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 über Anker-Funktionen und Nutzung siehe die CSS-Ankerpositionierung Modul-Startseite und den Anleitung zur Verwendung von CSS-Ankerpositionierung.

Eigenschaften, die anchor() Funktionswerte akzeptieren

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

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

Kompatibilität von inset-Eigenschaften und <anchor-side> Werten

Beim Verwenden einer anchor() Funktion innerhalb eines inset-Eigenschaftswerts muss der <anchor-side> Parameter, der innerhalb der anchor() Funktion angegeben ist, mit der Achse, auf der sich die inset-Eigenschaft befindet, kompatibel sein.

Dies bedeutet, dass physikalische <anchor-side> Werte innerhalb der Werte physikalischer inset-Eigenschaften verwendet werden können, wenn die Eigenschaft die gleiche Achsenrichtung wie <anchor-side> hat. Mit anderen Worten, die top und bottom Seiten sind innerhalb der left und right Eigenschaftswerte nicht gültig, und die left und right Seiten sind innerhalb top und bottom Eigenschaftswerte nicht gültig. 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) angegeben würde, 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, als wäre sie auf auto gesetzt.

Sie können logische <anchor-side> Werte sowohl innerhalb logischer als auch physikalischer 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 physikalische <anchor-side> Parameter innerhalb logischer inset-Eigenschaftswerte verwendet werden, da die physikalische Seite zur Achse passen muss, zu der die inset-Eigenschaft innerhalb des 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 inkompatibel. 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ächsten positionierten Vorfahren oder des Viewports 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 inkompatibel. 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, je nach Schreibmodus) seines nächsten positionierten Vorfahren oder des Viewports positioniert, abhängig vom gesetzten position-Wert.

Um das Potenzial für Verwirrung mit diesen Werten zu verringern, wird empfohlen, logische inset-Eigenschaften mit logischen <anchor-side> Werten und physikalische inset-Eigenschaften mit physikalischen <anchor-side> Werten zu verwenden. Sie sollten die Verwendung logischer Werte wann immer möglich bevorzugen, da sie besser für die Internationalisierung sind.

Die center und <percentage> Werte sind innerhalb der anchor() Funktion innerhalb aller logischen und physikalischen 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 Kurzschreibweise-inset-Werte.

Verwendung von anchor() zur Positionierung von Popovers

Beim Verwenden von anchor() zur Positionierung von Popovers beachten Sie, dass die Standardstile für Popovers mit der Position, die Sie erreichen möchten, in Konflikt stehen können. Die üblichen Verdächtigen sind die Standardstile für margin und inset, daher empfiehlt es sich, diese zurückzusetzen:

.positionedPopover {
  margin: 0;
  inset: auto;
}

Die CSS-Arbeitsgruppe prüft Wege, um dieses Workaround zu vermeiden.

Verwendung von anchor() innerhalb calc()

Wenn sich die anchor() Funktion auf eine Seite des Standardankers bezieht, können Sie einen margin einfügen, um Abstände zwischen den Rändern des Ankers und des positionierten Elements nach Bedarf zu schaffen. Alternativ können Sie die anchor() Funktion innerhalb einer calc() Funktion einfügen, 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 Platz zwischen den Kanten zu schaffen:

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

Dieses Beispiel positioniert die logische Block-Endkante des positionierten Elements 10px von der logischen Block-Startkante des Ankerelements entfernt:

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

Positionierung eines Elements relativ zu mehreren Ankern

Sie können ein Element relativ zu mehreren Ankern positionieren, indem Sie unterschiedliche <anchor-name> Werte innerhalb der anchor() Funktion für verschiedene inset-Eigenschaften am gleichen 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, mit denen es vergrößert werden kann.

Während ein positioniertes Element relativ zu mehr als einem Anker-Element positioniert werden kann, ist es immer nur mit dem einzigen Anker, der über seine position-anchor Eigenschaft (oder das anchor HTML-Attribut) definiert ist, assoziiert. Dies ist der Anker, bei dem das Element beim Scrollen der Seite mitscrollt; es kann auch verwendet werden, um zu steuern, wann das Element bedingt ausgeblendet wird.

Formale Syntax

<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>  

Beispiele

Häufige Verwendung

In diesem Beispiel wird die anchor() Funktion verwendet, um die Höhe eines anchor-positioned Elements auf die Höhe seines Ankers festzulegen, 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 anchor-positioned Element von seinem Anker zu versetzen.

HTML

Wir fügen ein <div> Element hinzu, das wir als unseren Anker festlegen, 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-positioned Element. Die ersten beiden positionieren die obere Kante des Elements bündig mit der oberen Kante des Ankers und die untere Kante bündig mit der 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 zur 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

Vergleich verschiedener anchor-side Werte

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, mit denen Sie die <anchor-side> Werte innerhalb dieser anchor() Funktionen variieren können, damit 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 jeweils das Ankerelement und das positionierte Element sein, mit dem wir es verknüpfen werden.

Wir fügen auch etwas Fülltext um die beiden <div> Elemente hinzu, um das <body> höher zu machen, sodass es scrollt. Dieses Beispiel enthält auch zwei <select> Elemente, um die Dropdown-Menüs zu erstellen, die die Auswahl verschiedener <anchor-side> Werte zum Platzieren des positionierten Elements ermöglichen. Wir haben den Fülltext und die <select> Elemente aus Gründen der 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 Anker-Namen darauf über die anchor-name Eigenschaft setzen. Dann assoziieren wir es mit dem positionierten Element, indem wir denselben Wert für seine position-anchor Eigenschaft setzen. top: anchor(--my-anchor bottom) positioniert die Oberkante des Infoboxes bündig zur Unterkante seines Ankers, während left: anchor(right) die linke Kante der Infobox bündig zur rechten Kante ihres Ankers positioniert. Dies bietet eine Ausgangsposition, die überschrieben wird, wenn unterschiedliche 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 #dddddd;
  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 hören 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 die anchor() Funktion innerhalb der relevanten inset-Eigenschaft (top oder left) der Infobox ein.

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 verschiedene Werte aus den Dropdown-Menüs aus, um zu sehen, wie sie die Positionierung der Infobox beeinflussen.

Element positioniert relativ zu mehreren Ankern

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-positioned Elements festzulegen. Die Anker können über Tastatursteuerungen bewegt oder gezogen werden, um das positionierte Element zu vergrößern.

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 sie mit unterschiedlichen Positionierungsinformationen zu versehen. Das letzte <div> hat eine Klasse von infobox und wird als das positionierte Element definiert. Wir fügen das tabindex Attribut hinzu, um ihnen zu ermöglichen, Tastaturfokus zu erhalten.

<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 #dddddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 1rem;
}

Die Anker erhalten jeweils einen unterschiedlichen 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-positioned Element, dessen position auf fixed gesetzt ist, ist über seine position-anchor Eigenschaft mit einem Anker assoziiert. Es ist relativ zu zwei Ankern positioniert, indem zwei verschiedene <anchor-name> Werte mit den anchor() Funktionen auf seinen inset-Eigenschaften gesetzt sind. In diesem Fall verwenden wir <percentage> Werte für den <anchor-side> Parameter, der den Abstand vom Start der Achse der inset-Eigenschaft angibt, auf der die Funktion eingestellt ist.

.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 ist relativ zu beiden Ankerelementen positioniert. Ziehen Sie sie mit der Maus oder tabben Sie zu ihnen und nutzen Sie die Tasten W, A, S und D, um sie nach oben, unten, links und rechts zu bewegen. Sehen Sie, wie dies ihre Position ändert und folglich die Fläche des positionierten Elements. Scrollen Sie, um zu sehen, wie die Positionen aller Elemente beibehalten werden.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• position-anchor
• position-area
• anchor-size() Funktion
• Anleitung zur Verwendung von CSS-Ankerpositionierung
• Fallback-Optionen und bedingtes Verbergen gegen Überlauf
• CSS-Ankerpositionierung Modul