position-anchor

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die position-anchor CSS Eigenschaft gibt den Ankernamen des Ankerelements an (d.h. ein Element, das einen Ankernamen durch die anchor-name Eigenschaft gesetzt hat), mit dem ein positioniertes Element verbunden ist.

Syntax

css

/* Single values */
position-anchor: auto;
position-anchor: --anchor-name;

/* Global values */
position-anchor: inherit;
position-anchor: initial;
position-anchor: revert;
position-anchor: revert-layer;
position-anchor: unset;

Werte

auto: Verbindet ein positioniertes Element mit seinem impliziten Ankerelement, falls es eines hat — zum Beispiel gesetzt durch das nicht standardisierte HTML anchor Attribut.
<dashed-ident>: Der Name des Ankerelements, mit dem das positionierte Element verbunden werden soll, wie im Ankerelement unter der anchor-name Eigenschaft aufgeführt. Dies wird als default anchor specifier bezeichnet.

Beschreibung

Diese Eigenschaft ist nur für "positionierte" Elemente relevant — Elemente und Pseudo-Elemente, die eine position von absolute oder fixed haben.

Um ein Element relativ zu einem Ankerelement zu positionieren, benötigt das positionierte Element drei Merkmale: eine Verbindung, eine Position und einen Ort. Die Eigenschaften position-anchor und anchor-name bieten eine explizite Verbindung.

Das Ankerelement nimmt einen oder mehrere <dashed-ident> Ankernamen auf, die es über die anchor-name Eigenschaft gesetzt hat. Wenn einer dieser Namen dann als Wert der position-anchor Eigenschaft des positionierten Elements gesetzt wird, werden die beiden Elemente verbunden.

Wenn es mehrere Ankerelemente mit dem im position-anchor aufgeführten Ankernamen gibt, wird das positionierte Element mit dem letzten Ankerelement in der Quellenreihenfolge mit diesem Ankernamen verbunden.

Um ein positioniertes Element an seinen Anker zu binden, muss es relativ zu einem Ankerelement mit einem Anker-Positionierungsmerkmal platziert werden, wie zum Beispiel der anchor() Funktion (als Wert für inset properties gesetzt) oder der position-area Eigenschaft.

Wenn der zugehörige Anker verborgen ist, zum Beispiel mit display: none oder visibility: hidden, oder wenn er Teil der übersprungenen Inhalte eines anderen Elements ist, weil er content-visibility: hidden darauf gesetzt hat, wird das Ankerpositionierte Element nicht angezeigt.

Die position-anchor Eigenschaft wird von allen Elementen unterstützt, die positioniert sind, einschließlich Pseudo-Elementen wie ::before und ::after. Pseudo-Elemente sind implizit an dasselbe Element wie das Ursprungs-Element des Pseudo-Elements verankert, es sei denn, es wird anders angegeben.

Für weitere Informationen zu Ankermerkmalen und Verwendung siehe die Modul-Übersichtsseite CSS anchor positioning und den Using CSS anchor positioning Leitfaden.

Formale Definition

Anfangswert	`auto`
Anwendbar auf	absolut positionierte Elemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

position-anchor = 
  auto           |
  <anchor-name>  

<anchor-name> = 
  <dashed-ident>

Beispiele

Sehen Sie sich die anchor-name Dokumentation für grundlegende Verwendung und zusätzliche position-anchor Beispiele an.

Verwendung eines Schieberegler-Daumens als Anker

In diesem Beispiel wird ein <output> relativ zu einem Anker positioniert, der der Daumen eines Bereichsschiebereglers ist.

HTML

Wir fügen ein <input type="range"> Element und ein <output> Element ein, um den Wert des Bereichs anzuzeigen. Der Wert, der im <output> Element angezeigt wird, wird über JavaScript aktualisiert, wenn sich der Schiebereglerwert ändert.

html

<label for="slider">Change the value:</label>
<input type="range" min="0" max="100" value="25" id="slider" />
<output>25</output>

CSS

Wir geben dem Daumen, dargestellt durch das ::-webkit-slider-thumb Pseudo-Element, einen Ankernamen von --thumb. Wir setzen dann diesen Namen als Wert der position-anchor Eigenschaft des <output> Elements und geben ihm einen position Wert von fixed. Diese Schritte verbinden das <output> mit dem Daumen.

Schließlich verwenden wir die Eigenschaften left und top mit anchor() Werten, um das <output> relativ zum Daumen zu positionieren.

body {
  display: grid;
  place-items: center;
  height: 100vh;
  font-size: 1.4rem;
  font-family: sans-serif;
}
input {
  width: 33vw;
}
output {
  background: cyan;
  border: 2px solid darkblue;
  padding: 3px 6px;
  border-radius: 10px;
  font-size: 1.2rem;
}

css

input::-webkit-slider-thumb {
  anchor-name: --thumb;
}

output {
  position-anchor: --thumb;
  position: absolute;
  left: anchor(right);
  bottom: anchor(top);
}

JavaScript

Wir fügen einen Ereignis-Listener hinzu, der den Inhalt des <output> Elements aktualisiert, wenn sich der Wert des <input> ändert:

const input = document.querySelector("input");
const output = document.querySelector("output");

input.addEventListener("input", (event) => {
  output.innerText = `${input.value}`;
});

Ergebnisse

Die Ausgabe ist an den Daumen verankert. Ändern Sie den Wert. Wenn die Ankerpositionierung in Ihrem Browser unterstützt wird, wird der Wert über und rechts vom Daumen angezeigt, egal wo er sich auf dem Schieberegler befindet.

Mehrere positionierte Elemente und Anker

In diesem Beispiel können Sie mehrere positionierte Elemente bewegen und sie mit verschiedenen Ankern verbinden. Dieses Beispiel zeigt, wie ein Anker mit mehreren positionierten Elementen verbunden werden kann, aber ein ankerpositioniertes Element kann immer nur mit einem Anker zur gleichen Zeit verbunden sein, dem Anker, der durch die anchor-position Eigenschaft definiert ist.

HTML

Wir haben vier Anker und zwei positionierte Elemente, unterschieden durch verschiedene id Werte. Die positionierten Elemente enthalten <select> Boxen, die es Ihnen ermöglichen, auszuwählen, mit welchem Anker Sie sie verbinden möchten.

html

<div id="anchor-container">
  <div class="anchor" id="anchor1">⚓︎</div>
  <div class="anchor" id="anchor2">⚓︎</div>
  <div class="anchor" id="anchor3">⚓︎</div>
  <div class="anchor" id="anchor4">⚓︎</div>
</div>

<div class="infobox" id="infobox1">
  <form>
    <label for="anchor1-anchor-select">Place infobox on:</label>
    <select id="anchor1-anchor-select">
      <option value="1">Anchor 1</option>
      <option value="2">Anchor 2</option>
      <option value="3">Anchor 3</option>
      <option value="4">Anchor 4</option>
    </select>
  </form>
</div>

<div class="infobox" id="infobox2">
  <form>
    <label for="anchor2-anchor-select">Place infobox on:</label>
    <select id="anchor2-anchor-select">
      <option value="1">Anchor 1</option>
      <option value="2">Anchor 2</option>
      <option value="3">Anchor 3</option>
      <option value="4">Anchor 4</option>
    </select>
  </form>
</div>

CSS

Wir erklären das erste anchor <div> als Anker unter Verwendung der Eigenschaft anchor-name, die zwei durch Kommas getrennte Ankernamen, einen für jedes positionierte Element, erhält. Dies ist der Ausgangszustand des Demos — beide positionierten Elemente werden an den ersten Anker gebunden.

body {
  height: 100vh;
}

#anchor-container {
  display: grid;
  height: 100%;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr 1fr;
  justify-items: center;
  align-items: center;
}

.anchor {
  font-size: 1.8rem;
  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;
}

css

#anchor1 {
  anchor-name: --my-anchor1, --my-anchor2;
}

Jedes der positionierten Elemente erhält eine position-anchor Eigenschaft mit einem Wert, der einem der beiden Ankernamen entspricht. Die positionierten Elemente erhalten dann ankerbezogene Positionierungsinformationen mithilfe einer Kombination von Einsetz-, Ausrichtungs- und Rand-Eigenschaften.

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

css

#infobox1 {
  position-anchor: --my-anchor1;
  position: fixed;
  left: anchor(right);
  align-self: anchor-center;
  margin-left: 10px;
}

#infobox2 {
  position-anchor: --my-anchor2;
  position: fixed;
  bottom: anchor(top);
  justify-self: anchor-center;
  margin-bottom: 15px;
}

JavaScript

Wir ändern dynamisch, auf welchen Ankerelementen die anchor-name Werte gesetzt werden, als Reaktion auf verschiedene Anker, die in den <select> Menüs der positionierten Elemente ausgewählt werden. Die Schlüsselfunktionalität hier ist der change Ereignishandler, updateAnchorNames(). Es setzt beide Ankernamen auf einen Anker, wenn die in den beiden <select> Menüs gewählten Anker gleich sind. Andernfalls setzt es einen einzelnen Ankernamen auf zwei separate Anker, wie angemessen.

// Get references to the two select menus
const select1 = document.querySelector("#anchor1-anchor-select");
const select2 = document.querySelector("#anchor2-anchor-select");
// Store references to all the anchors in a NodeList (array-like)
const anchors = document.querySelectorAll("#anchor-container > div");

// Set the same change event handler on both select menus
select1.addEventListener("change", updateAnchorNames);
select2.addEventListener("change", updateAnchorNames);

function updateAnchorNames() {
  // Remove all anchor names from all anchors
  for (const anchor of anchors) {
    anchor.style.anchorName = "none";
  }

  // convert the select menu values to numbers, and remove one to
  // make them match the selected anchors' index positions in the NodeList
  const value1 = Number(select1.value) - 1;
  const value2 = Number(select2.value) - 1;

  if (value1 === value2) {
    // If the chosen anchors are both the same, set both anchor
    // names on the same anchor
    anchors[value1].style.anchorName = "--my-anchor1, --my-anchor2";
  } else {
    // If they are not the same, set the anchor names separately
    // on each selected anchor
    anchors[value1].style.anchorName = "--my-anchor1";
    anchors[value2].style.anchorName = "--my-anchor2";
  }
}

Ergebnis

Wählen Sie unterschiedliche Werte aus den Dropdown-Menüs, um die Anker zu ändern, zu denen die Elemente relativ positioniert sind.

Spezifikationen

Specification
CSS Anchor Positioning # position-anchor

Browser-Kompatibilität

Siehe auch

anchor-name
HTML anchor Attribut
CSS-Ankerpositionierung Modul
Verwendung der CSS-Ankerpositionierung Anleitung

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden