`anchor()` CSS-Funktion

Baseline 2026

Neu verfügbar

Seit January 2026 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

Die anchor() CSS Funktion kann innerhalb der Inset-Eigenschaft eines ankerpositionierten Elements verwendet werden und gibt einen Längenwert relativ zur Position der Kanten des zugehörigen Ankerelements zurück.

Syntax

css

/* 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 Eigenschaft anchor-name 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 assoziiert ist.

Hinweis: Die Angabe eines <anchor-name> innerhalb einer anchor() Funktion verbindet kein Element mit einem Anker; sie positioniert das Element nur relativ zu diesem Anker. Zur Erstellung der Assoziation sind weiterhin die position-anchor CSS-Eigenschaft oder das anchor HTML-Attribut erforderlich.

<anchor-side>

Gibt die Seite des Ankers an, oder die relative Entfernung von der start-Seite, zu der das Element positioniert wird. Wird ein physischer oder logischer Wert verwendet, 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 Anfang des Umschließenden Blocks des Ankerelements entlang der Achse der Inset-Eigenschaft, auf der die anchor() Funktion gesetzt ist.
end: Das logische Ende des umschließenden 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 die Entfernung als Prozentwert 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, auf den die Funktion zurückgreifen soll, wenn die anchor() Funktion ansonsten 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 Rändern eines Ankerelements zu positionieren. Sie ist nur innerhalb von Inset-Eigenschaft Werten gültig, die auf Elementen mit absoluter oder fester Positionierung gesetzt sind.

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

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

Für detaillierte Informationen zu Ankerfunktionen und -nutzung siehe das CSS-Ankerpositionierungsmodul und den Leitfaden zur Verwendung von CSS-Ankerpositionierung.

Eigenschaften, die `anchor()` Funktionswerte akzeptieren

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

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

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

Dies bedeutet, dass physische <anchor-side> Werte innerhalb der Werte physischer 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 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 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 erhält. 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 innerhalb sowohl 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 Sache wird komplizierter, wenn physische <anchor-side> Parameter innerhalb logischer Inset-Eigenschaftswerte verwendet werden, da die physische Seite die Achse entsprechen muss, auf die sich die Inset-Eigenschaft im aktuellen Schreibmodus bezieht. Zum Beispiel:

Im 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.
Im 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 Verwirrungen mit diesen Werten zu minimieren, wird empfohlen, logische Inset-Eigenschaften mit logischen <anchor-side> Werten und physische 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 geeignet sind.

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

Die folgende Tabelle listet die Inset-Eigenschaften und die <anchor-side> Parameterwerte auf, die mit ihnen kompatibel sind. Wir haben nur die Langform-Inset-Eigenschaften aufgeführt; diese umfassen die Kurzform-Inset-Eigenschaftswerte.

Inset-Eigenschaft	Kompatibler `<anchor-side>` Wert
Alle	`center`
Alle	`<percentage>`
`top` und `bottom`	`top`, `bottom`, `start`, `end`, `self-start`, `self-end`
`left` und `right`	`left`, `right`, `start`, `end`, `self-start`, `self-end`
`inset-block-start` und `inset-block-end`	`start`, `end`, `self-start`, und `self-end` `top` und `bottom` im horizontalen Schreibmodus `left` und `right` im vertikalen Schreibmodus
`inset-inline-start` und `inset-inline-end`	`start`, `end`, `self-start`, und `self-end` `left` und `right` im horizontalen Schreibmodus `top` und `bottom` im vertikalen Schreibmodus

Verwendung von `anchor()` zur Positionierung von Popovers

Beim Einsatz von anchor() zur Positionierung von Popovers sollten Sie beachten, dass die Standardstile für Popovers möglicherweise mit der angestrebten Position in Konflikt stehen. Die üblichen Übeltäter sind die Standardstile für margin und inset, daher ist es ratsam, diese zurückzusetzen:

css

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

Die CSS-Arbeitsgruppe prüft Möglichkeiten, um diesen Workaround zu vermeiden.

Verwendung von `anchor()` innerhalb von `calc()`

Wenn sich die anchor() Funktion auf eine Seite des Standardankers bezieht, können Sie beispielsweise ein margin hinzufügen, um einen Abstand zwischen den Kanten 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 Rand hinzu, um einen Abstand zwischen den Kanten zu schaffen:

css

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

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

css

.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 verschiedener Inset-Eigenschaften auf demselben Element angeben (siehe Element positioniert relativ zu mehreren Ankern unten). Dies kann nützlich sein, um Funktionalitäten wie Ziehpunkte an den Ecken eines positionierten Elements zu schaffen, die zum Vergrößern bzw. Verkleinern verwendet werden können.

Während ein positioniertes Element relativ zu mehr als einem Ankerelement positioniert werden kann, ist es immer nur mit dem einzigen Anker verbunden, der durch seine position-anchor Eigenschaft (oder das anchor HTML-Attribut) definiert ist. Dies ist der Anker, mit dem das Element beim Scrollen der Seite mitscrollen wird; er kann auch verwendet werden, um zu steuern, wann das Element konditionell versteckt 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 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 <div> Element ein, das wir als unseren Anker festlegen, und ein <p> Element, das wir relativ zu diesem Anker positionieren werden:

html

<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 assoziieren, und setzen dann drei Inset-Eigenschaften auf das ankerpositionierte 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 um 10px nach rechts von der Kante des Ankers zu positionieren.

css

.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 mittels anchor() Funktionen definiert sind. Es gibt auch zwei Dropdown-Menüs, die es erlauben, 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 der Klasse anchor und eines mit der Klasse infobox. Diese sollen das Ankerelement und das positionierte Element sein, das wir damit assoziieren werden.

Wir fügen auch etwas Fülltext um die beiden <div> Elemente herum hinzu, um den <body> höher zu machen, damit er 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 der Kürze halber versteckt.

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

html

<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 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 obere Kante der Infobox bündig mit der unteren Kante ihres Ankers, während left: anchor(right) die linke Kante der Infobox bündig mit der rechten Kante ihres Ankers positioniert. Dies bietet eine anfängliche Position, die überschrieben wird, wenn verschiedene 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;
}

css

.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 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(--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 zur Einstellung der Position der oberen linken und unteren rechten Ecken des ankerpositionierten Elements verwendet werden. Die Anker können über Tastatursteuerungen oder durch ziehen bewegt werden, wodurch das positionierte Element verändert wird.

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 den Empfang von Tastaturfokus zu ermöglichen.

html

<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 verschiedene Inset-Werte, um die Anker in einer Rechteckformation zu positionieren.

css

.anchor {
  position: absolute;
}

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

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

Das ankerpositionierte Element, dessen position auf fixed gesetzt ist, ist über seine position-anchor Eigenschaft mit einem Anker verbunden. Es wird relativ zu zwei Ankern positioniert, indem man zwei verschiedene <anchor-name> Werte mit den anchor() Funktionen auf seine Inset-Eigenschaften setzt. In diesem Fall verwendeten wir <percentage> Werte für den <anchor-side> Parameter, indem wir den Abstand vom Anfang der Achse der Inset-Eigenschaft angaben, auf der die Funktion gesetzt ist.

css

.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 navigieren Sie zu ihnen und verwenden Sie die Tasten W, A, S und D, um sie nach oben, unten, links und rechts zu bewegen. Sehen Sie, wie sich dies auf ihre Position und infolgedessen auf den Bereich des positionierten Elements auswirkt. Scrollen Sie, um zu sehen, wie die Positionen aller Elemente beibehalten werden.

Hinweis: Dieses Beispiel ist ein Konzeptnachweis und nicht zur Verwendung im Produktionscode vorgesehen. Unter anderem bricht das Beispiel zusammen, wenn Sie versuchen, die Anker horizontal oder vertikal aneinander vorbeizubewegen.