position-anchor

Syntax

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

Assoziiert ein positioniertes Element mit seinem impliziten Ankerelement, falls es eines hat — beispielsweise wie durch das nicht-standardisierte HTML anchor Attribut festgelegt.

none

Der initiale (Standard-)Wert. Das positionierte Element ist nicht mit einem Ankerelement assoziiert.

<dashed-ident>

Der Name des Ankerelements, mit dem das positionierte Element assoziiert werden soll, wie im anchor-name Attribut des Ankerelements angegeben. Dies ist bekannt als der Standardanker-Spezifizierer.

Beschreibung

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

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

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

Falls es mehrere Ankerelemente mit dem in der Eigenschaft position-anchor aufgeführten Ankernamen gibt, wird das positionierte Element mit dem letzten Ankerelement in der Quellreihenfolge mit diesem Ankernamen assoziiert.

Um eine zuvor erstellte Assoziation zwischen einem ankerpositionierten Element und einem Anker aufzuheben, können Sie den Wert position-anchor des ankerpositionierten Elements auf none setzen.

Um ein positioniertes Element an seinen Anker zu binden, muss es relativ zu einem Ankerelement mittels einer Ankerpositionierungsfunktion, wie der anchor() Funktion (als Wert auf Einsetz-Eigenschaften gesetzt) oder der position-area Eigenschaft, positioniert werden.

Wenn der assoziierte Anker versteckt ist, z.B. durch display: none oder visibility: hidden, oder wenn er Teil der übersprungenen Inhalte eines anderen Elements ist, weil es content-visibility: hidden auf ihm gesetzt hat, wird das ankerpositionierte Element nicht angezeigt.

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

Für weitere Informationen zu Ankerfunktionen und deren Verwendung, siehe das CSS Ankerpositionierungs- Modul und den Verwendung von CSS Ankerpositionierung Leitfaden.

Formale Definition

Formale Syntax

position-anchor = 
  normal         |
  none           |
  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.

Mehrere positionierte Elemente und Anker

In diesem Beispiel können Sie mehrere positionierte Elemente bewegen und sie mit verschiedenen Ankern assoziieren. Dieses Beispiel zeigt, wie ein Anker mit mehreren positionierten Elementen assoziiert werden kann, aber ein ankerpositioniertes Element kann nur mit einem Anker gleichzeitig assoziiert werden, dem durch die anchor-position Eigenschaft definierten Anker.

HTML

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

<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 Anker unter Verwendung der anchor-name Eigenschaft, die ihm zwei durch Kommata getrennte Ankernamen gibt, einen für jedes positionierte Element. Dies ist der Ausgangszustand der Demo — beide positionierten Elemente werden an den ersten Anker gebunden sein.

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

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

Jedem der positionierten Elemente wird eine position-anchor Eigenschaft mit einem Wert, der einem der beiden Ankernamen entspricht, gegeben. Die positionierten Elemente werden dann mit ankerrelativen Positionierungsinformationen unter Verwendung einer Kombination aus Einsetz-, Ausrichtungs- und Rand-Eigenschaften versehen.

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

#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 verändern dynamisch, welche Ankerelemente die anchor-name Werte in Reaktion auf unterschiedliche Anker gesetzt sind, die in den <select> Menüs der positionierten Elemente ausgewählt werden. Die Schlüssel-Funktionalität hier ist der change Ereignis-Handler, updateAnchorNames(). Es setzt beide Ankernamen auf einem Anker, wenn die Anker, die in den beiden <select> Menüs gewählt wurden, 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, relativ zu denen die Elemente positioniert sind.

Verwendung eines Schieberegler-Daumens als Anker

In diesem Beispiel wird ein <output> relativ zu einem Anker positioniert, der der Daumen eines Bereichs-Schiebereglers 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 Schiebereglerwert ändert.

<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 die ::-webkit-slider-thumb und ::-moz-range-thumb Pseudo-Elemente, einen Ankernamen --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 assoziieren 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;
}

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

input::-moz-range-thumb {
  anchor-name: --thumb;
}

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

JavaScript

Wir fügen einen Event-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 am Daumen verankert. Ändern Sie den Wert und die Ausgabe bleibt oberhalb und rechts vom Daumen, egal wo er sich entlang des Schiebereglers befindet.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• anchor-name
• anchor-scope
• HTML anchor Attribut
• CSS Ankerpositionierungs- Modul
• Verwendung von CSS Ankerpositionierung Leitfaden