position-area

Limited availability

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

Die position-area CSS Eigenschaft ermöglicht es einem Anker-Positionierten Element, relativ zu den Rändern seines zugehörigen Ankerelements positioniert zu werden, indem das positionierte Element auf eine oder mehrere Kacheln eines impliziten 3x3-Rasters gelegt wird, wobei das Ankerelement die mittlere Zelle bildet.

position-area bietet eine bequeme Alternative zur Verankerung und Positionierung eines Elements relativ zu seinem Anker über Einsetzeigenschaften und die anchor() Funktion. Das auf einem Raster basierende Konzept löst den häufigen Anwendungsfall der Anordnung der Ränder des enthaltenen Blocks des positionierten Elements relativ zu den Rändern seines Standard-Ankerelements.

Wenn ein Element kein Standard-Ankerelement hat oder kein absolut positioniertes Element ist, hat diese Eigenschaft keine Wirkung.

Hinweis: Diese Eigenschaft wurde ursprünglich in Chromium-Browsern als inset-area benannt und unterstützt, mit denselben Eigenschaftswerten. Beide Eigenschaftsnamen werden für kurze Zeit unterstützt, um die Abwärtskompatibilität zu gewährleisten.

Syntax

css

/* Default value */
position-area: none;

/* Two <position-area> keywords defining a single specific tile */
position-area: top left;
position-area: start end;
position-area: block-start center;
position-area: inline-start block-end;
position-area: x-start y-end;
position-area: center self-y-end;

/* Two <position-area> keywords spanning two tiles */
position-area: top span-left;
position-area: center span-start;
position-area: inline-start span-block-end;
position-area: y-start span-x-end;

/* Two <position-area> keywords spanning three tiles */
position-area: top span-all;
position-area: block-end span-all;
position-area: self-x-start span-all;

/* One <position-area> keyword with an implicit second <position-area> keyword  */
position-area: top; /* equiv: top span-all */
position-area: inline-start; /* equiv: inline-start span-all */
position-area: center; /* equiv: center center */
position-area: span-all; /* equiv: center center */
position-area: end; /* equiv: end end */

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

Werte

Der Eigenschaftswert ist zwei <position-area> Schlüsselbegriffe oder das Schlüsselwort none. Wenn nur ein <position-area> Schlüsselbegriff angegeben wird, wird der zweite implizit.

<position-area>: Gibt den Bereich des Positionierungs-Rasters an, in dem ausgewählte positionierte Elemente platziert werden sollen.
none: Es wird kein Positionierungsbereich festgelegt.

Beschreibung

Die position-area Eigenschaft bietet eine Alternative zur anchor() Funktion zur Positionierung von Elementen relativ zu Ankern. position-area basiert auf dem Konzept eines 3x3 Kachelrasters, genannt das position-area grid, wobei das Ankerelement die mittlere Kachel ist:

Das position-area Grid, wie unten beschrieben

Die Rasterkacheln sind in Zeilen und Spalten unterteilt:

Die drei Zeilen werden durch die physikalischen Werte top, center und bottom dargestellt. Sie haben auch logische Entsprechungen wie block-start, center und block-end, sowie Koordinatenäquivalente — y-start, center und y-end.
Die drei Spalten werden durch die physikalischen Werte left, center und right dargestellt. Sie haben auch logische Entsprechungen wie inline-start, center und inline-end sowie Koordinatenäquivalente — x-start, center und x-end.

Die Dimensionen der mittleren Kachel werden durch den enthältenden Block des Ankerelements definiert, während die Dimensionen des äußeren Rands des Rasters durch den enthältenden Block des positionierten Elements definiert werden.

Der <position-area> Wert besteht aus einem oder zwei Schlüsselwörtern, die den Bereich des Rasters definieren, in dem das positionierte Element platziert werden soll. Genau genommen wird der enthältende Block des positionierten Elements auf den Rasterbereich gesetzt.

Zum Beispiel:

Sie können einen Zeilenwert und einen Spaltenwert angeben, um das positionierte Element in einer einzigen, spezifischen Rasterzelle zu platzieren — beispielsweise wird top left (logisches Äquivalent start start) oder bottom center (logisches Äquivalent end center) das positionierte Element in der oberen linken oder unteren mittleren Zelle platzieren.
Sie können einen Zeilen- oder Spaltenwert plus einen span-* Wert angeben, um zwei oder drei Zellen zu umfassen. Der erste Wert gibt die Zeile oder Spalte an, in der das positionierte Element platziert wird, wobei es zunächst in der Mitte platziert wird, und der andere gibt die anderen Kacheln dieser Zeile oder Spalte an, die umspannt werden sollen. Zum Beispiel:
- top span-left bewirkt, dass das positionierte Element in der Mitte der oberen Zeile platziert und über die Mitte und die linke Kachel dieser Zeile umspannt wird.
- block-end span-inline-end bewirkt, dass das positionierte Element in der Mitte der Block-End-Zeile platziert und über die Mitte und die Inline-End-Kacheln dieser Zeile umspannt wird.
- bottom span-all und y-end span-all bewirken, dass das positionierte Element in der Mitte der unteren Zeile platziert wird und über drei Zellen umspannt wird, in diesem Fall über die linke, mittlere und rechte Kachel der unteren Zeile.

Für detaillierte Informationen zu Ankerfunktionen, Verwendung und der position-area Eigenschaft siehe die CSS-Ankerpositionierung Modul-Landingpage und den Verwendung der CSS-Ankerpositionierung Leitfaden, speziell den Abschnitt über das Setzen einer position-area.

Angepasstes Standardverhalten

Wenn ein <position-area> Wert auf ein positioniertes Element gesetzt wird, wird das Standardverhalten einiger seiner Eigenschaften angepasst, um eine gute Standardausrichtung zu liefern.

`normal` Wert der Eigenschaft für die Eigenpositionierung

Der normal-Wert der Eigenpositionierungseigenschaften, einschließlich align-items, align-self, justify-items und justify-self, verhält sich entweder als start, end oder anchor-center. Welcher Wert einer Eigenpositionierungseigenschaft als Standardwert verwendet wird, hängt von der Positionierung des Elements ab:

Wenn der position-area Wert den mittleren Bereich auf einer Achse angibt, ist die Standardausrichtung auf dieser Achse anchor-center.
Andernfalls ist das Verhalten das Gegenteil des durch die position-area Eigenschaft angegebenen Bereichs. Zum Beispiel, wenn der position-area Wert den Startbereich seiner Achse spezifiziert, ist die Standardausrichtung auf dieser Achse end.

Zum Beispiel, wenn der writing-mode auf horizontal-tb gesetzt ist, bewirkt position-area: top span-x-start, dass das positionierte Element in der Mitte der oberen Reihe platziert und über die Mitte und die Startkacheln dieser Reihe umspannt wird. In diesem Fall werden die Eigenpositionierungseigenschaften standardmäßig align-self: end und justify-self: anchor-center verwenden.

Einsetzeigenschaften und Werte

Wenn ein ankerpositioniertes Element mit der position-area Eigenschaft positioniert wird, spezifizieren alle festgelegten Einsetzeigenschaften, wie top oder inset-inline-end, Versatzwerte vom Positionierungsbereich. Einige andere Eigenschaftswerte, wie max-block-size: 100%, werden ebenfalls relativ zum Positionierungsbereich sein. Alle Einsetzeigenschaften, die gesetzt oder standardmäßig auf auto sind, verhalten sich so, als ob ihr Wert auf 0 gesetzt wurde.

Eine Nebenbemerkung zur Breite des positionierten Elements

Wenn das positionierte Element keine spezifische Größe hat, wird seine Größe standardmäßig auf seine intrinsische Größe gesetzt, sie wird aber auch von der Größe des position-area Rasters beeinflusst.

Wenn das positionierte Element in einer einzelnen oberen Mitte-, unteren Mitte- oder Mittel-Mittelzelle platziert wird, ist seine Blockgröße dieselbe wie die Größe des Anker-Containblöckelements, wachsend nach oben, unten oder in beide Richtungen. Das positionierte Element wird mit der angegebenen Rasterzelle ausgerichtet, übernimmt jedoch dieselbe Breite wie das Ankerelement. Es lässt jedoch seinen Inhalt nicht überlaufen — seine minimale Breite wird sein min-content (wie durch die Breite seines längsten Wortes definiert) sein.

Wenn das positionierte Element in einer anderen einzelnen Rasterzelle (etwa mit position-area: top left) platziert oder so eingestellt wird, dass es zwei oder mehr Rasterzellen umspannt (zum Beispiel mit position-area: bottom span-all), wird es mit dem angegebenen Rasterbereich ausgerichtet, verhält sich jedoch so, als ob es eine width von max-content darauf gesetzt hat. Es wird entsprechend der Größe seines enthältenden Blocks bemessen, was die Größe ist, die ihm auferlegt wird, wenn es auf position: fixed gesetzt wurde. Es wird so breit wie der Textinhalt, obwohl es möglicherweise auch durch den Rand des <body> eingeschränkt wird.

Verwendung von `position-area` zur Positionierung von Popovers

Beim Verwenden von position-area zur Positionierung von Popovers seien Sie sich bewusst, dass die Standardstile für Popovers mit der von Ihnen angestrebten Positionierung in Konflikt stehen können. Die gewöhnlichen Schuldigen sind die Standardstile für margin und inset, daher empfiehlt es sich, diese zurückzusetzen:

css

.my-popover {
  margin: 0;
  inset: auto;
}

Die CSS-Arbeitsgruppe untersucht Möglichkeiten, diesen Workaround zu vermeiden.

Formale Definition

Anfangswert	`none`
Anwendbar auf	Positioned elements with a default anchor element
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

position-area = 
  none             |
  <position-area>  

<position-area> = 
  [ left | center | right | span-left | span-right | x-start | x-end | span-x-start | span-x-end | self-x-start | self-x-end | span-self-x-start | span-self-x-end | span-all ] || [ top | center | bottom | span-top | span-bottom | y-start | y-end | span-y-start | span-y-end | self-y-start | self-y-end | span-self-y-start | span-self-y-end | span-all ]  |
  [ block-start | center | block-end | span-block-start | span-block-end | span-all ] || [ inline-start | center | inline-end | span-inline-start | span-inline-end | span-all ]  |
  [ self-block-start | center | self-block-end | span-self-block-start | span-self-block-end | span-all ] || [ self-inline-start | center | self-inline-end | span-self-inline-start | span-self-inline-end | span-all ]  |
  [ start | center | end | span-start | span-end | span-all ]{1,2}  |
  [ self-start | center | self-end | span-self-start | span-self-end | span-all ]{1,2}

Beispiele

Einfaches Beispiel

In diesem Beispiel wird ein positioniertes Element mit der position-area Eigenschaft relativ zu seinem zugehörigen Anker verankert und positioniert.

HTML

Das HTML enthält ein <div> und ein <p>. Das <p> wird mit CSS relativ zum <div> positioniert. Wir inkludieren auch einen Stilblock, der sichtbar gemacht wird. Alle Elemente sind über das contenteditable Attribut direkt bearbeitbar.

html

<div class="anchor" contenteditable="true">⚓︎</div>

<p class="positionedElement" contenteditable="true">This can be edited.</p>

<style contenteditable="true">.positionedElement {
    position-area: top center;
  }
</style>

CSS

Wir konvertieren das <div> zu einem Ankerelement mit der anchor-name Eigenschaft. Dann verknüpfen wir das absolut positionierte <p> mit ihm, indem wir seinen position-anchor Wert auf denselben Ankernamen setzen.

Wir setzen den anfänglichen position-area Wert auf top center. Dieser Wert wird auf einen p Selektor gesetzt, sodass der Wert weniger Spezifität hat als jeder Wert, der dem <style> Block's .positionedElement Klassenselektor hinzugefügt wird. Dadurch können Sie den anfänglichen position-area Wert überschreiben, indem Sie einen position-area Wert innerhalb des Stilblocks festlegen.

css

.anchor {
  anchor-name: --infobox;
  background: palegoldenrod;
  font-size: 3em;
  width: fit-content;
  border: 1px solid goldenrod;
  margin: 100px auto;
}

p {
  position: absolute;
  position-anchor: --infobox;
  position-area: top center;
  margin: 0;
  background-color: darkkhaki;
  border: 1px solid darkolivegreen;
}

style {
  display: block;
  white-space: pre;
  font-family: monospace;
  background-color: #ededed;
  -webkit-user-modify: read-write-plaintext-only;
  line-height: 1.5;
  padding: 10px;
}

Ergebnisse

Versuchen Sie, die Menge an Text im ankerpositionierten Element zu ändern, um zu sehen, wie es wächst. Versuchen Sie auch, den Wert der position-area Eigenschaft auf etwas anderes wie center zu ändern.

Vergleich von `position-area` Werten

Dieses Demo erstellt einen Anker und verknüpft ein positioniertes Element damit. Es bietet auch ein Dropdown-Menü, mit dem Sie verschiedene position-area Werte auswählen können, um sie auf das positionierte Element anzuwenden, um ihre Wirkung zu sehen. Eine der Optionen verursacht das Erscheinen eines Textfelds, das es Ihnen ermöglicht, einen benutzerdefinierten Wert einzugeben. Schließlich wird ein Kontrollkästchen bereitgestellt, um writing-mode: vertical-lr ein- und auszuschalten, damit Sie beobachten können, wie sich position-area Wertwirkungen in verschiedenen Schreibmodi unterscheiden.

HTML

Im HTML spezifizieren wir zwei <div> Elemente, eines mit der Klasse anchor und eines mit der Klasse infobox. Diese sollen das Ankerelement und das von uns damit verknüpfte positionierte Element sein. Wir haben das contenteditable Attribut auf beide gesetzt, wodurch sie direkt bearbeitbar sind.

Wir haben auch zwei Formulare eingeschlossen, die die <select> und <input type="text"> Elemente für das Setzen verschiedener position-area Werte enthalten, sowie das <input type="checkbox"> Element zum Umschalten des vertikalen writing-mode. Der Code dafür sowie das JavaScript wurden der Kürze halber versteckt.

html

<div class="anchor" contenteditable>⚓︎</div>

<div class="infobox">
  <p contenteditable>You can edit this text.</p>
</div>

<form id="position-area-form">
  <div>
    <label for="position-area-select">Choose a position-area:</label>
    <select id="position-area-select" name="position-area-select">
      <optgroup label="Enter custom value">
        <option>Custom</option>
      </optgroup>
      <optgroup label="Physical, single tile">
        <option selected>top left</option>
        <option>bottom right</option>
      </optgroup>
      <optgroup label="Physical, span two">
        <option>bottom span-right</option>
        <option>left span-top</option>
      </optgroup>
      <optgroup label="Physical, span all">
        <option>top</option>
        <option>left</option>
      </optgroup>
      <optgroup label="Logical, single tile">
        <option>start center</option>
        <option>inline-start block-end</option>
      </optgroup>
      <optgroup label="Logical, span two">
        <option>start span-end</option>
        <option>center span-start</option>
        <option>inline-start span-block-end</option>
        <option>span-block-start center</option>
      </optgroup>
      <optgroup label="Logical, span all">
        <option>start span-all</option>
        <option>block-end</option>
      </optgroup>
      <optgroup label="Coordinates, single tile">
        <option>x-start center</option>
        <option>x-end y-end</option>
      </optgroup>
      <optgroup label="Coordinates, span two">
        <option>center span-y-start</option>
        <option>y-start span-x-end</option>
      </optgroup>
      <optgroup label="Coordinates, span all">
        <option>x-start span-all</option>
        <option>y-end</option>
      </optgroup>
    </select>
  </div>
  <div id="position-area-custom-container">
    <label for="position-area-custom">Enter a custom position-area:</label
    ><br />
    <input type="text" id="position-area-custom" name="position-area-custom" />
  </div>
</form>

<form id="writing-mode-form">
  <label for="writing-mode-checkbox">writing-mode: vertical-lr</label><br />
  <input
    type="checkbox"
    id="writing-mode-checkbox"
    name="writing-mode-checkbox" />
</form>

CSS

In CSS deklarieren wir zuerst das anchor <div> als Ankerelement, indem wir einen Ankernamen über die anchor-name Eigenschaft darauf setzen.

Das positionierte Element wird mit dem Ankerelement verknüpft, indem wir seinen Ankernamen als Wert der position-anchor Eigenschaft des positionierten Elements setzen. Wir geben ihm auch eine anfängliche Position mit position-area: top left; dies wird überschrieben, wenn neue Werte aus dem <select> Menü ausgewählt werden. Schließlich setzen wir seine opacity auf 0.8, sodass, wenn das positionierte Element einen position-area Wert erhält, der es über dem Anker platziert, Sie die Position der Elemente zueinander sehen können.

.anchor {
  font-size: 1.8rem;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: hsl(240 100% 75%);
  min-width: 50px;
  min-height: 50px;
  line-height: 50px;
  border-radius: 10px;
  border: 1px solid black;
  padding: 3px;
}

html {
  height: 100%;
}

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

form {
  background: white;
  border: 1px solid black;
  padding: 5px;
  position: fixed;
}

#position-area-form {
  top: 0;
  right: 2px;
}

#position-area-form div:last-child {
  margin-top: 10px;
}

#position-area-form div :last-child {
  margin-top: 5px;
}

#writing-mode-form {
  bottom: 0;
  left: 2px;
  writing-mode: horizontal-tb;
}

#position-area-custom-container {
  display: none;
}

.infobox {
  color: darkblue;
  background-color: azure;
  border: 1px solid #dddddd;
  padding: 5px 2px;
  border-radius: 5px;
  font-size: 1rem;
  box-sizing: border-box;
}

css

.anchor {
  anchor-name: --my-anchor;
}

.infobox {
  position-anchor: --my-anchor;
  position: fixed;
  opacity: 0.8;
  position-area: top left;
}

const anchorContainer = document.querySelector("body");
const infobox = document.querySelector(".infobox");

const positionAreaForm = document.querySelector("#position-area-form");
const selectElem = document.querySelector("select");
const inputElemContainer = document.querySelector(
  "#position-area-custom-container",
);
const inputElem = document.querySelector("#position-area-custom");
const checkboxElem = document.querySelector("#writing-mode-checkbox");

// Stop form from submitting when enter is pressed on it
positionAreaForm.addEventListener("submit", (e) => {
  e.preventDefault();
});

// Update positioned element position-area to value selected in drop-down
selectElem.addEventListener("change", () => {
  const area = selectElem.value;

  if (area === "Custom") {
    // Show the custom value input field
    inputElemContainer.style.display = "block";
  } else {
    // Hide the custom value input field
    inputElemContainer.style.display = "none";
    // Set the position-area to the value chosen in the select box
    infobox.style.positionArea = area;
  }
});

// Update positioned element position-area to entered custom value
inputElem.addEventListener("change", () => {
  const customArea = inputElem.value;

  // Set the position-area to the value in the input box
  infobox.style.positionArea = customArea;
});

// Change writing-mode to match checkbox setting
checkboxElem.addEventListener("change", () => {
  if (checkboxElem.checked) {
    anchorContainer.style.writingMode = "vertical-lr";
  } else {
    anchorContainer.style.writingMode = "horizontal-tb";
  }
});

Ergebnis

Das Ergebnis ist wie folgt:

Versuchen Sie, neue position-area Werte aus dem <select> Menü auszuwählen, um die Auswirkung auf die Position der Infobox zu sehen. Wählen Sie den "Benutzerdefinierten" Wert und versuchen Sie, benutzerdefinierte position-area Werte in das Texteingabefeld einzugeben, um deren Wirkung zu sehen. Fügen Sie dem Anker- und den ankerpositionierten Elementen Text hinzu, um zu sehen, wie das ankerpositionierte Element basierend auf dem position-area Wert wächst. Überprüfen Sie schließlich das Kontrollkästchen und experimentieren Sie dann mit verschiedenen position-area Werten, um zu sehen, welche denselben Effekt über verschiedene Schreibmodi haben und welche unterschiedliche Ergebnisse liefern.