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 spezifiziert den Ankernamen des Ankerelements (d.h. ein Element, das einen Ankernamen über die anchor-name Eigenschaft gesetzt hat) wohin ein positioniertes Element zugeordnet wird.

Syntax

css

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

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

Werte

auto: Ordnet ein positioniertes Element seinem impliziten Ankerelement zu, falls es eines hat — zum Beispiel wenn es durch das nicht standardmäßige HTML-Attribut anchor gesetzt wurde.
none: Der initiale (Standard-)Wert. Das positionierte Element ist keinem Ankerelement zugeordnet.
<dashed-ident>: Der Name des Ankerelements, mit dem das positionierte Element verknüpft werden soll, wie im anchor-name-Attribut des Ankerelements aufgeführt. Dies wird als der Standardanker-Spezifizierer bezeichnet.

Beschreibung

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

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

Das Ankerelement akzeptiert einen oder mehrere <dashed-ident> Ankernamen, die über die anchor-name Eigenschaft festgelegt werden. Wenn einer dieser Namen dann als Wert der position-anchor Eigenschaft des positionierten Elements festgelegt wird, werden die beiden Elemente verknüpft.

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

Um eine zuvor hergestellte Zuordnung zwischen einem Anker-positionierten Element und einem Anker zu lösen, können Sie den position-anchor Wert des Anker-positionierten Elements auf none setzen.

Um ein positioniertes Element an seinen Anker zu binden, muss es relativ zu einem Ankerelement positioniert werden, indem ein Anker-Positionierungsmerkmal, wie die anchor() Funktion (als Wert auf Einfügeigenschaften gesetzt) oder die position-area Eigenschaft verwendet wird.

Wenn der zugeordnete Anker verborgen ist, zum Beispiel mit display: none oder visibility: hidden, oder wenn er aufgrund von content-visibility: hidden Teil der übersprungenen Inhalte eines anderen Elements ist, wird das Anker-positionierte Element nicht angezeigt.

Die position-anchor Eigenschaft wird von allen positionierten Elementen unterstützt, einschließlich Pseudo-Elementen wie ::before und ::after. Pseudo-Elemente sind implizit an dasselbe Element wie das Ursprungselement des Pseudo-Elements verankert, sofern nicht anders angegeben.

Für mehr Informationen über Ankerfunktionen und -nutzung siehe das CSS-Anker-Positionierungsmodul und den Leitfaden zur Nutzung von CSS-Anker-Positionierung.

Formale Definition

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

Formale Syntax

position-anchor = 
  none           |
  auto           |
  <anchor-name>  

<anchor-name> = 
  <dashed-ident>

Beispiele

Siehe die Dokumentation zu anchor-name für grundlegende Nutzung und zusätzliche position-anchor-Beispiele.

Verwenden eines Slider-Daumen als Anker

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

HTML

Wir fügen ein <input type="range"> Element und ein <output> Element hinzu, um den Wert des Bereichs anzuzeigen. Der im <output>-Element angezeigte Wert wird über JavaScript aktualisiert, wenn sich der Sliderwert ä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 --thumb. Dann setzen wir 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 left und top Eigenschaften 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 Ereignislistener 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

Das Ausgabe-Element ist an den Daumen verankert. Ändern Sie den Wert. Falls Anker-Positionierung in Ihrem Browser unterstützt wird, wird der Wert oben rechts vom Daumen angezeigt, egal, wo er sich entlang des Sliders befindet.

Mehrere positionierte Elemente und Anker

In diesem Beispiel können Sie mehrere positionierte Elemente bewegen und sie mit unterschiedlichen Ankern verbinden. Dieses Beispiel zeigt, wie ein Anker mit mehreren positionierten Elementen verknüpft werden kann, aber ein Anker-positioniertes Element kann nur mit einem einzigen Anker zu einem Zeitpunkt, dem durch die anchor-position-Eigenschaft definierten Anker, verknüpft werden.

HTML

Wir haben vier Anker und zwei positionierte Elemente, die mit unterschiedlichen id Werten unterschieden werden. Die positionierten Elemente enthalten <select> Boxen, die es ermöglichen zu wählen, mit welchem Anker sie verknüpft werden sollen.

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 deklarieren das erste anchor <div> als einen Anker mit Hilfe der anchor-name Eigenschaft, die mit zwei durch Komma getrennten Ankernamen versehen ist, einer für jedes positionierte Element. Dies ist der Anfangszustand der Demo — beide positionierten Elemente sind 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 anker-relative Positionierungsinformationen durch eine Kombination aus Einfügeigenschaften, 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 welche Ankerelemente die anchor-name Werte in Reaktion auf unterschiedliche, in den <select> Menüs der positionierten Elemente ausgewählte Anker gesetzt sind. Die Hauptfunktionalität hier ist der change-Ereignishandler, updateAnchorNames(). Er setzt beide Ankernamen auf einen Anker, falls die in den beiden <select> Menüs ausgewählten Anker gleich sind. Andernfalls setzt er 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 verschiedene Werte aus den Dropdown-Menüs aus, um die Anker zu ändern, relativ zu denen die Elemente positioniert sind.

Spezifikationen

Specification
CSS Anchor Positioning Module Level 1 # position-anchor

Browser-Kompatibilität

Siehe auch

anchor-name
anchor-scope
HTML anchor Attribut
CSS-Anker-Positionierung Modul
Anleitung zur Verwendung der CSS-Anker-Positionierung Leitfaden

Help improve MDN

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

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