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 ist.
position-area
bietet eine bequeme Alternative zum Verankern und Positionieren eines Elements relativ zu seinem Anker über inset properties und die anchor()
-Funktion. Das rasterbasierte Konzept löst den häufigen Anwendungsfall, die Ränder des umgebenden Blocks des positionierten Elements relativ zu den Rändern seines Standard-Ankerelements zu positionieren.
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 eine kurze Zeit unterstützt, um die Rückwärtskompatibilität zu gewährleisten.
Syntax
/* 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 y-self-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: x-self-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 besteht aus zwei <position-area>
Schlüsselbegriffe oder dem Schlüsselwort none
. Wenn nur ein <position-area>
Schlüsselwort angegeben wird, wird der zweite Schlüsselbegriff impliziert.
<position-area>
-
Gibt den Bereich des Positionierungsrasters 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 Kachelraster, dem position-area grid, wobei das Ankerelement die mittlere Kachel ist:
Die Rasterkacheln sind in Zeilen und Spalten unterteilt:
- Die drei Zeilen werden durch die physikalischen Werte
top
,center
undbottom
repräsentiert. Sie haben auch logische Entsprechungen wieblock-start
,center
undblock-end
und Koordinatenäquivalente —y-start
,center
undy-end
. - Die drei Spalten werden durch die physikalischen Werte
left
,center
undright
repräsentiert. Sie haben auch logische Entsprechungen wieinline-start
,center
undinline-end
und Koordinatenäquivalente —x-start
,center
undx-end
.
Die Dimensionen der mittleren Kachel werden durch den umgebenden Block des Ankerelements definiert, während die Dimensionen des äußeren Rands des Rasters durch den umgebenen Block des positionierten Elements definiert sind.
Der <position-area>
Wert besteht aus einem oder zwei Schlüsselwörtern, die den Bereich des Rasters angeben, innerhalb dessen das positionierte Element platziert werden soll. Genauer gesagt, wird der umgebende Block des positionierten Elements auf den Rasterbereich festgelegt.
Beispielsweise:
- Sie können einen Zeilenwert und einen Spaltenwert angeben, um das positionierte Element in einem einzelnen, spezifischen Rasterquadrat zu platzieren — zum Beispiel wird
top left
(logische Entsprechungstart start
) oderbottom center
(logische Entsprechungend center
) das positionierte Element in das obere rechte oder untere mittlere Quadrat platzieren. - Sie können einen Zeilen- oder Spaltenwert plus einen
span-*
Wert angeben, um zwei oder drei Zellen zu überspannen. Der erste Wert gibt die Zeile oder Spalte an, in der das positionierte Element platziert wird, zunächst in der Mitte, und der andere die anderen Kacheln dieser Zeile oder Spalte, die überspannt werden sollen. Zum Beispiel:top span-left
führt dazu, dass das positionierte Element in der Mitte der oberen Zeile platziert und über die mittlere und linke Kachel dieser Zeile überspannt wird.block-end span-inline-end
führt dazu, dass das positionierte Element in der Mitte der Blockend-Zeile platziert und über die mittlere und Inline-End-Kachel dieser Zeile überspannt wird.bottom span-all
undy-end span-all
führen dazu, dass das positionierte Element in der Mitte der unteren Zeile platziert und über drei Zellen überspannt wird, in diesem Fall die linke, mittlere und rechte Kachel der unteren Zeile.
Für detaillierte Informationen zu Ankerfunktionen, deren Nutzung und der position-area
Eigenschaft, siehe die CSS anchor positioning Modul-Hauptseite und den Using CSS anchor positioning Leitfaden, insbesondere den Abschnitt über das Festlegen einer position-area
.
Angepasstes Standardverhalten
Wenn ein <position-area>
Wert auf ein positioniertes Element gesetzt wird, werden einige seiner Eigenschaften ihr Standardverhalten so angepasst, dass eine gute Standardausrichtung erzielt wird.
Selbst-Ausrichtungseigenschaft normal
Wert
Der normal
Wert der Selbst-Ausrichtungseigenschaften, einschließlich align-items
, align-self
, justify-items
und justify-self
, verhält sich entweder als start
, end
oder anchor-center
. Welcher Wert für eine Selbst-Ausrichtungseigenschaft als Standard gewählt wird, hängt von der Positionierung des Elements ab:
- Wenn der
position-area
Wert die mittlere Region einer Achse angibt, ist die Standardausrichtung in dieser Achseanchor-center
. - Andernfalls ist das Verhalten das Gegenteil der von der
position-area
Eigenschaft angegebenen Region. Zum Beispiel, wenn derposition-area
Wert die Startregion seiner Achse angibt, ist die Standardausrichtung in dieser Achseend
.
Zum Beispiel, wenn der writing-mode
auf horizontal-tb
gesetzt ist, verursacht position-area: top span-x-start
, dass das positionierte Element in der Mitte der oberen Zeile platziert und über die mittlere und Startkachel dieser Zeile überspannt wird. In diesem Fall werden die Selbst-Ausrichtungseigenschaften standardmäßig align-self: end
und justify-self: anchor-center
sein.
Einsetzeigenschaften und Werte
Wenn ein Anker-positioniertes Element mit der position-area
Eigenschaft positioniert wird, geben alle festgelegten Einsetzeigenschaften, wie top
oder inset-inline-end
, die Versätze vom Positionierungsbereich an. Einige andere Eigenschaftswerte, wie max-block-size: 100%
, beziehen sich ebenfalls auf den Positionierungsbereich. Alle Einsetzeigenschaften, die auf auto
gesetzt oder als Standardwert haben, verhalten sich so, als ob ihr Wert auf 0
gesetzt wäre.
Ein Exkurs zur Breite des positionierten Elements
Wenn das positionierte Element keine spezifische Größe hat, wird seine Größe standardmäßig seine intrinsische Größe sein, aber sie wird auch von der Größe des position-area Rasters beeinflusst.
Wenn das positionierte Element in einer einzelnen obersten Mitte, unteren Mitte oder zentralen Zelle platziert wird, entspricht seine Blockgröße der des umgebenden Blocks des Ankers und wächst nach oben, unten oder in beide Richtungen. Das positionierte Element wird sich mit dem angegebenen Rasterquadrat ausrichten, aber die gleiche Breite wie das Ankerelement annehmen. Es wird jedoch nicht zulassen, dass sein Inhalt überläuft — seine minimale width
wird ihr min-content
sein (wie durch die Breite seines längsten Wortes definiert).
Wenn das positionierte Element in einem anderen einzelnen Rasterquadrat platziert wird (sagen wir mit position-area: top left
) oder so eingestellt ist, dass es zwei oder mehr Rasterquadrate überspannt (zum Beispiel mit position-area: bottom span-all
), wird es sich mit dem angegebenen Rasterbereich ausrichten, aber verhalten, als ob es eine width
von max-content
darauf gesetzt hat. Es wird entsprechend der Größe seines umgebenden Blocks bestimmt, die die Größe ist, die ihm zugewiesen wird, wenn es auf position: fixed
gesetzt wurde. Es wird sich so weit wie der Textinhalt erstrecken, obwohl es möglicherweise auch durch den Rand des <body>
eingeschränkt wird.
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 | x-self-start | x-self-end | span-x-self-start | span-x-self-end | span-all ] || [ top | center | bottom | span-top | span-bottom | y-start | y-end | span-y-start | span-y-end | y-self-start | y-self-end | span-y-self-start | span-y-self-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 verankert und relativ zu seinem zugehörigen Anker mit der position-area
Eigenschaft positioniert.
HTML
Das HTML enthält ein <div>
und ein <p>
. Das <p>
wird relativ zum <div>
mit CSS positioniert. Wir fügen auch ein Stil-Block hinzu, der sichtbar gemacht wird. Alle Elemente sind direkt bearbeitbar über das contenteditable
-Attribut.
<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>
in ein Ankerelement mit der anchor-name
Eigenschaft. Dann assoziieren wir das absolut positionierte <p>
mit ihm, indem wir seinen position-anchor
Wert auf denselben Ankernamen setzen.
Wir setzen den initialen position-area
Wert auf top center
. Dieser Wert wird auf einen p
-Selektor gesetzt, sodass der Wert eine geringere Spezifität als jeder Wert hat, der dem <style>
-Block .positionedElement
Klassenselektor hinzugefügt wird. Infolgedessen können Sie den initialen position-area
Wert überschreiben, indem Sie einen position-area
Wert innerhalb des Stil-Blocks setzen.
.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 des Textes im Anker-positionierten Element zu ändern, um zu sehen, wie es wächst. Versuchen Sie auch, den Wert der position-area
Eigenschaft zu etwas anderem zu ändern, wie z. B. center
.
Vergleich der position-area
Werte
Dieses Demo erstellt einen Anker und verankert ein positioniertes Element daran. Es bietet auch ein Dropdown-Menü, mit dem verschiedene position-area
Werte auf das positionierte Element angewendet werden können, um deren Effekt zu sehen. Eine der Optionen führt dazu, dass ein Texteingabefeld erscheint, das Ihnen ermöglicht, einen benutzerdefinierten Wert einzugeben. Schließlich gibt es ein Kontrollkästchen, um writing-mode: vertical-lr
ein- und auszuschalten, sodass Sie beobachten können, wie sich die position-area
Werteffekte in verschiedenen Schreibmodi unterscheiden.
HTML
Im HTML spezifizieren wir zwei <div>
Elemente, eines mit einer Klasse anchor
und eines mit einer Klasse infobox
. Diese sollen das Ankerelement und das positionierte Element sein, das wir damit assoziieren werden. Wir haben das contenteditable
Attribut auf beide gesetzt, sodass sie direkt bearbeitbar sind.
Wir haben auch zwei Formulare hinzugefügt, die die <select>
und <input type="text">
Elemente zum Setzen unterschiedlicher position-area
Werte enthalten, sowie das <input type="checkbox">
Element zum Umschalten des vertikalen writing-mode
. Der Code für diese, zusammen mit dem JavaScript, wurde um der Kürze willen versteckt.
<div class="anchor" contenteditable>⚓︎</div>
<div class="infobox">
<p contenteditable>You can edit this text.</p>
</div>
CSS
Im CSS deklarieren wir zunächst das anchor
<div>
als Ankerelement, indem wir einen Ankernamen darauf über die anchor-name
Eigenschaft setzen.
Das positionierte Element wird mit dem Ankerelement assoziiert, indem der Ankername als Wert der position-anchor
Eigenschaft des positionierten Elements gesetzt wird. 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
, so dass, wenn das positionierte Element einen position-area
Wert erhält, der es über dem Anker platziert, Sie immer noch die relative Position der Elemente zueinander sehen können.
.anchor {
anchor-name: --myAnchor;
}
.infobox {
position-anchor: --myAnchor;
position: fixed;
opacity: 0.8;
position-area: top left;
}
Ergebnis
Das Ergebnis ist wie folgt:
Versuchen Sie, neue position-area
Werte aus dem <select>
Menü auszuwählen, um den Effekt auf die Position der Infobox zu sehen. Wählen Sie den "Custom"-Wert und versuchen Sie, einige benutzerdefinierte position-area
Werte in das Textfeld einzugeben, um deren Effekt zu sehen. Fügen Sie dem Anker und den Anker-positionierten Elementen Text hinzu, um zu sehen, wie das Anker-positionierte Element basierend auf dem position-area
Wert wächst. Schließlich aktivieren Sie das Kontrollkästchen und experimentieren Sie mit verschiedenen position-area
Werten, um zu sehen, welche denselben Effekt in verschiedenen Schreibmodi haben und welche unterschiedliche Ergebnisse erzeugen.
Spezifikationen
Specification |
---|
CSS Anchor Positioning # position-area |
Browser-Kompatibilität
Siehe auch
anchor-name
position-anchor
position-try-fallbacks
- Die
anchor()
Funktion - Der
<position-area>
Wert - Using CSS anchor positioning Leitfaden
- Fallback-Optionen und bedingtes Verbergen bei Überlauf Leitfaden
- CSS anchor positioning Modul