position-anchor

Syntax

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

Verknüpft ein positioniertes Element mit seinem impliziten Ankerelement, falls es eines hat — zum Beispiel wie durch das nicht standardisierte HTML anchor Attribut festgelegt.

<dashed-ident>

Der Name des Ankerelements, mit dem das positionierte Element verbunden wird, wie im anchor-name der Ankerelement-Eigenschaft aufgelistet. Dies wird als Standard-Anker-Gleichsetzer bezeichnet.

Beschreibung

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

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

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

Wenn es mehrere Ankerelemente gibt, die den im position-anchor aufgelisteten Ankernamen besitzen, wird das positionierte Element mit dem letzten Ankerelement in der Quellreihenfolge verknüpft, das diesen Ankernamen aufweist.

Um ein positioniertes Element an seinen Anker zu binden, muss es relativ zu einem Ankerelement unter Verwendung eines Ankerpositionierungsfeatures platziert werden, wie etwa der anchor() Funktion (als Wert auf inset Eigenschaften gesetzt) oder der position-area Eigenschaft.

Wenn der verknüpfte Anker versteckt ist, zum Beispiel mit display: none oder visibility: hidden, oder wenn es Teil der übersprungenen Inhalte eines anderen Elements ist, aufgrund einer Einstellung von content-visibility: hidden, wird das ankerpositionierte Element nicht angezeigt.

Die position-anchor Eigenschaft wird auf allen Elementen unterstützt, die positioniert sind, einschließlich Pseudo-Elementen wie ::before und ::after. Pseudo-Elemente sind implizit mit demselben Element wie das abgeleitete Element des Pseudo-Elements verankert, es sei denn, es ist anders festgelegt.

Für weitere Informationen zu Ankerfeatures und deren Verwendung, siehe die CSS Ankerpositionierungs- Modulstartseite und den Anleitung zur Verwendung von CSS Ankerpositionierung.

Formale Definition

Formale Syntax

position-anchor = 
  auto           |
  <anchor-name>  

<anchor-name> = 
  <dashed-ident>  

Beispiele

Siehe die Dokumentation zu anchor-name für grundlegende Verwendung und weitere position-anchor Beispiele.

Verwenden 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 ein, um den Wert des Bereichs anzuzeigen. Der im <output> Element angezeigte Wert wird über JavaScript aktualisiert, wenn sich der Schieberwert ä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 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 verknüpfen 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;
}

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

JavaScript

Wir fügen einen Ereignis-Listener ein, 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 Output-Element ist am 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 entlang des Schiebereglers befindet.

Mehrere positionierte Elemente und Anker

In diesem Beispiel können Sie mehrere positionierte Elemente bewegen und mit verschiedenen Ankern assoziieren. Dieses Beispiel demonstriert, wie ein Anker mit mehreren positionierten Elementen assoziiert werden kann, aber ein ankerpositioniertes Element kann immer nur mit einem einzelnen Anker gleichzeitig assoziiert sein, der durch die anchor-position Eigenschaft definiert ist.

HTML

Wir haben vier Anker und zwei positionierte Elemente, die durch unterschiedliche id Werte unterschieden werden. Die positionierten Elemente enthalten <select> Boxen, die Ihnen ermöglichen, 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 zwei kommagetrennte Ankernamen erhält, einen für jedes positionierte Element. Dies ist der Anfangszustand der Demo — 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;
}

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

Jedem der positionierten Elemente wird eine position-anchor Eigenschaft mit einem Wert zugewiesen, der einem der beiden Ankernamen entspricht. Die positionierten Elemente erhalten dann ankerbezogene Positionierungsinformationen mit einer Kombination aus inset, Ausrichtungs- und Margin-Eigenschaften.

.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 ändern dynamisch, auf welchen Ankerelementen die anchor-name Werte gesetzt sind, als Reaktion auf unterschiedliche Anker, die in den <select> Menüs der positionierten Elemente ausgewählt werden. Die Schlüssel-Funktionalität hier ist der change Ereignishandler, updateAnchorNames(). Es setzt beide Ankernamen auf einem Anker, wenn die Anker, die in den beiden <select> Menüs gewählt werden, gleich sind. Anderenfalls setzt es einen einzelnen Ankernamen auf zwei separate Anker, je nach Bedarf.

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

Browser-Kompatibilität

Siehe auch

• anchor-name
• HTML anchor Attribut
• CSS Ankerpositionierungsmodul
• Anleitung zur Verwendung von CSS Ankerpositionierung