anchor()

Die Syntax der anchor() Funktion ist wie folgt:

anchor( , )

Die Parameter sind:

Optional

Der anchor-name Eigenschaftswert eines Ankerelements, an dem Sie die Seite des Elements relativ positionieren möchten. Dies ist ein Wert. Wenn nicht angegeben, wird der Standardanker des Elements verwendet, der in seiner position-anchor Eigenschaft referenziert oder über das anchor HTML-Attribut mit dem Element assoziiert ist.

Hinweis: Das Angeben eines innerhalb einer anchor() Funktion assoziiert 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 sind weiterhin erforderlich, um die Assoziation zu erstellen.

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

top

Der obere Rand des Ankerelements.

right

Der rechte Rand des Ankerelements.

bottom

Der untere Rand des Ankerelements.

left

Der linke Rand des Ankerelements.

start

Der logische Anfang des enthaltenen Blocks des Ankerelements entlang der Achse der Rand-Eigenschaft, auf die die anchor() Funktion gesetzt ist.

end

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

self-start

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

self-end

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

center

Die Mitte der Achse der Rand-Eigenschaft, auf die die anchor() Funktion gesetzt ist.

Gibt die Entfernung als Prozentsatz vom Anfang des Inhalts des Elements entlang der Achse der Rand-Eigenschaft an, auf die die anchor() Funktion gesetzt ist.

Das CSS-Anker-Positionierungsmodul spezifiziert zwei zusätzliche Werte, inside und outside, die noch nicht implementiert wurden.

Optional

Gibt einen Rückfallwert an, auf den die Funktion aufgelöst werden soll, wenn die anchor() Funktion ansonsten ungültig wäre.

Gibt einen Wert zurück.

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 fest positionierten Elementen festgelegt sind.

Sie gibt einen Wert zurück, der den Abstand zwischen der ankerpositionierten Elementseite angibt, die durch den Randwert spezifiziert ist, und der Seite des Ankerelements, die durch den gewählten Wert angegeben ist. Da sie einen zurückgibt, kann sie in anderen CSS-Funktionen verwendet werden, die Längenwerte akzeptieren, einschließlich calc(), clamp(), usw.

Wenn kein Anker mit dem durch den spezifizierten Namen existiert oder das positionierte Element keinen Anker zugeordnet hat (d.h. über die position-anchor Eigenschaft), wird der erste Parameter als ungültig betrachtet und der Rückfallwert wird verwendet, falls vorhanden. Zum Beispiel, wenn top: anchor(bottom, 50px) auf dem positionierten Element spezifiziert wurde, aber kein Anker damit assoziiert war, würde der Rückfallwert verwendet werden, sodass top einen berechneten Wert von 50px erhält.

Für detaillierte Informationen zu Ankerfunktionen und deren Verwendung siehe die CSS anker positionieren Modul-Seite und den Verwendung von CSS-Ankerpositionierung Leitfaden.

Die CSS Rand-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

Wenn eine anchor() Funktion innerhalb eines Rand-Eigenschaftswerts verwendet wird, muss der innerhalb der anchor() Funktion spezifizierte Parameter mit der Achse kompatibel sein, auf der die Rand-Eigenschaft liegt.

Das bedeutet, dass physische Werte innerhalb der Werte von physischen Rand-Eigenschaften verwendet werden können, wenn die Eigenschaft dieselbe Achsenrichtung wie der hat. Mit anderen Worten sind die Seiten top und bottom nicht innerhalb der left und right Eigenschaftswerte gültig, und die Seiten left und right sind nicht innerhalb der top und bottom Eigenschaftswerte 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äre, würde der Rückfallwert verwendet werden, sodass top einen berechneten Wert von 50px erhält. Wenn kein Rückfall vorhanden ist, verhält sich die Rand-Eigenschaft, als wäre sie auf auto gesetzt.

Sie können logische Werte sowohl innerhalb logischer als auch physischer Rand-Eigenschaften verwenden, da logische Werte relativ zur relevanten Achse der Rand-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 Parameter innerhalb von logischen Rand-Eigenschaftswerten verwendet werden, da die physische Seite mit der Achse übereinstimmen muss, auf die die Rand-Eigenschaft im aktuellen Schreibmodus relevant ist. Zum Beispiel:

• In einem horizontalen Schreibmodus ist die Blockrichtung von oben nach unten, daher wird inset-block-end: anchor(bottom) funktionieren, 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ächsten positionierten Vorgängers 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 wird inset-block-end: anchor(left) funktionieren, 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ächsten positionierten Vorgängers oder des Viewports, abhängig vom gesetzten position Wert, positioniert.

Um das Potenzial für Verwirrung mit diesen Werten zu mindern, wird Ihnen empfohlen, logische Rand-Eigenschaften mit logischen Werten zu verwenden, und physische Rand-Eigenschaften mit physischen Werten. Sie sollten die Verwendung logischer Werte nach Möglichkeit bevorzugen, da diese besser für die Internationalisierung sind.

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

Die folgende Tabelle listet die Rand-Eigenschaften und die Parameterwerte auf, die mit ihnen kompatibel sind. Wir haben nur die Langform-Rand-Eigenschaften aufgelistet; diese umfassen die Werte der Kurzform-Rand-Eigenschaften.

Wenn sich die anchor() Funktion auf eine Seite des Standardankers bezieht, können Sie einen margin einfügen, um bei Bedarf einen Abstand zwischen den Kanten des Ankers und des positionierten Elements zu schaffen. Alternativ können Sie die anchor() Funktion in eine calc() Funktion einfügen, um den Abstand hinzuzufügen.

Dieses Beispiel positioniert die rechte Kante des positionierten Elements bündig an der linken Kante des Ankerelements und fügt dann eine Margin ein, um etwas 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);
}

Sie können ein Element relativ zu mehreren Ankern positionieren, indem Sie verschiedene Werte innerhalb der anchor() Funktion verschiedener Rand-Eigenschaften desselben Elements 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 verwendet werden können, um seine Größe zu ändern.

Während ein positioniertes Element relativ zu mehr als einem Ankerelement 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, mit dem das Element scrollt, wenn die Seite scrollt; er kann auch verwendet werden, um zu steuern, wann das Element bedingt versteckt wird.

 = 
  anchor( ?                  &&
   , ? )  

 = 
    

 = 
  inside        |
  outside       |
  top           |
  left          |
  right         |
  bottom        |
  start         |
  end           |
  self-start    |
  self-end      |
    |
  center        

 = 
        |
    

In diesem Beispiel wird die anchor() Funktion verwendet, um die Höhe eines ankerpositionierten 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 ankerpositionierte Element von seinem Anker zu versetzen.

HTML

Wir fügen ein

⚓︎

This is a positioned element.

.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;
}

Dieses Beispiel zeigt ein Element, das relativ zu einem Anker über seine top und left Eigenschaften positioniert ist, die unter Verwendung von anchor() Funktionen definiert sind. Es enthält auch zwei Dropdown-Menüs, mit denen Sie die Werte innerhalb dieser anchor() Funktionen variieren können, um zu sehen, welche Auswirkungen sie haben.

HTML

Wir spezifizieren zwei

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

⚓︎


  
This is an information box.

  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.



  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.



  

    
      Choose a vertical anchor() value:
    
    
      top: anchor(top)
      top: anchor(bottom)
      top: anchor(start)
      top: anchor(end)
      top: anchor(center)
      top: anchor(0%)
      top: anchor(25%)
      top: anchor(50%)
      top: anchor(75%)
      top: anchor(100%)
    
  
  

    
      Choose a horizontal anchor() value:
    
    
      left: anchor(left)
      left: anchor(right)
      left: anchor(self-start)
      left: anchor(self-end)
      left: anchor(center)
      left: anchor(0%)
      left: anchor(25%)
      left: anchor(50%)
      left: anchor(75%)
      left: anchor(100%)
    
  

.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);
}

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})`;
});

Dieses Beispiel positioniert ein Element relativ zu zwei verschiedenen Ankern, die verwendet werden, um die Position der oberen linken und unteren rechten Ecken des ankerpositionierten Elements festzulegen. Die Anker können über Tastatursteuerungen oder per Drag-and-Drop bewegt werden, um die Größe des positionierten Elements zu ändern.

⚓︎1

⚓︎2


  
This is an information box.

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

.anchor {
  position: absolute;
}

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

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

.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;
  }
}