<position-area>
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Der <position-area> CSS Datentyp definiert die Zelle oder gespannten Zellen eines Position-Area-Grids, eines 3x3-Gitters, dessen mittlere Zelle ein Ankerelement ist.
Die <position-area> Schlüsselwortwerte können als Wert der position-area Eigenschaft gesetzt werden, um ein Anker-positioniertes Element relativ zu seinem zugehörigen Ankerelement an einer bestimmten Position zu platzieren.
Syntax
<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 | self-block-end | span-self-block-start | span-self-block-end | span-all ]
||
[ self-inline-start | 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}
]
Beschreibung
Positionsbereiche basieren auf dem Konzept eines Position-Area-Grids, eines 3x3-Gitters aus Kacheln, das aus vier Gitterlinien besteht, zwei auf jeder Achse, wobei ein Ankerelement die zentrale Kachel ist:
Wenn sie als Wert der position-area Eigenschaft eines positionierten Elements verwendet werden, werden die Abmessungen der mittleren Kachel durch den enthaltenden Block des Standard-Ankerelements des Elements definiert. Die Abmessungen des äußeren Randes des Grids werden durch den umschließenden Block des positionierten Elements definiert. Logische Schlüsselbegriffe basieren im Allgemeinen auf dem Schreibmodus und der Richtung des umschließenden Blocks, außer bei den self-* Schlüsselbegriffen, die aus dem Schreibmodus des Anker-positionierten Elements berechnet werden.
Das Gitter ist in Reihen und Spalten unterteilt:
- Die drei Reihen werden durch die physischen Werte
top,centerundbottomdargestellt. Sie haben auch logische Äquivalente wieblock-start,centerundblock-endsowie Koordinatenäquivalente —y-start,centerundy-end. - Die drei Spalten werden durch die physischen Werte
left,centerundrightdargestellt. Sie haben auch logische Äquivalente wieinline-start,centerundinline-endsowie Koordinatenäquivalente —x-start,centerundx-end.
<position-area> Werte enthalten ein oder zwei Schlüsselwörter, die einen bestimmten Bereich des Position-Area-Grids definieren. Wenn man einen position-area Wert auf ein positioniertes Element setzt, wird sein umschließender Block im angegebenen Gitterbereich platziert:
/* Examples: Two keywords to place the element in a single specific tile */
position-area: top left;
position-area: bottom right;
position-area: start end;
position-area: center end;
position-area: block-start center;
position-area: inline-start block-end;
position-area: x-start y-end;
position-area: center self-y-end;
/* Examples: Two keywords to span the element across two tiles */
position-area: top span-left;
position-area: span-bottom right;
position-area: center span-start;
position-area: inline-start span-block-end;
position-area: y-start span-x-end;
/* Examples: Two keywords to span the element across three tiles */
position-area: top span-all;
position-area: block-end span-all;
position-area: self-x-start span-all;
/* Examples: One keyword with an implicit second 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: start; /* equiv: start start */
position-area: end; /* equiv: end end */
Die verschiedenen Arten von Schlüsselwörtern, die verwendet werden können, umfassen:
- Physische Gitter-Schlüsselwörter
- Generische logische Reihen- und Spalten-Schlüsselwörter
- Explizite logische Inline- und Block-Schlüsselwörter
- Koordinaten-Gitter-Schlüsselwörter
Hinweis:
Im Allgemeinen können Sie keine verschiedenen Typen in einem Wert mischen, z. B. physisch und logisch. Dies führt zu ungültigen Werten. Zum Beispiel ist position-area: bottom inline-end kein gültiger Wert, weil er physische und logische Schlüsselwörter mischt.
Physische Gitter-Schlüsselwörter
Die physischen Gitter-Schlüsselwörter spezifizieren eine Zelle oder einen Abschnitt des position-area Grids mit physischen Werten. Diese Werte werden nicht durch writing-mode oder direction Einstellungen beeinflusst.
Mit physischen Reihen- und Spalten-Schlüsselwörtern können Sie ein Schlüsselwort aus jeder der beiden folgenden Listen auswählen, um eine einzelne bestimmte Gitterkachel auszuwählen:
top,centeroderbottom: Die obere, mittlere oder untere Reihe des Grids.left,centeroderright: Die linke, mittlere oder rechte Spalte des Grids.
Zum Beispiel wählt top left die obere linke Kachel aus, während center right die zentrale Kachel der rechten Spalte auswählt.
Physische Spanning-Gitter-Schlüsselwörter
Die physischen Spanning-Schlüsselwörter — in Kombination mit einem physischen Reihen- oder Spalten-Schlüsselwort — spezifizieren eine zweite Gitterkachel, in die sich der Positionsbereich ausdehnen soll. Wenn eine solche Kombination als position-area Eigenschaftswert gesetzt wird, wird ein ausgewähltes Element zunächst in der Mitte der angegebenen Reihe oder Spalte platziert und erstreckt sich dann in die im Spanning-Schlüsselwort spezifizierte Richtung, wobei zwei Gitterkacheln überspannt werden:
span-left-
Überspannt die mittlere und die linke Spalte des Grids.
span-right-
Überspannt die mittlere und die rechte Spalte des Grids.
span-top-
Überspannt die mittlere und die obere Reihe des Grids.
span-bottom-
Überspannt die mittlere und die untere Reihe des Grids.
span-all-
Gültig mit allen Schlüsselworttypen, überspannt die genannte Zelle sowie die angrenzenden Zellen in derselben Zeile oder Spalte. Siehe
span-allunten.
Zum Beispiel überspannt top span-left die oberen mittleren und oberen linken Gitterzellen.
Hinweis:
Der Versuch, ein Reihen- oder Spalten-Schlüsselwort mit einem unangemessenen Spanning-Schlüsselwort zu kombinieren, führt zu einem ungültigen Wert. Zum Beispiel ist right span-right ungültig — Sie können die mittlere rechte Gitterkachel nicht auswählen und dann versuchen, weiter nach rechts zu spannen.
Standardwerte der physischen Gitter-Schlüsselwörter
Wenn nur ein einzelnes physisches Schlüsselwort im Wert von position-area angegeben ist, wird der andere Wert wie folgt impliziert:
left,right,top, oderbottom-
Der andere Wert wird als
span-allstandardmäßig angenommen, wodurch das Element alle drei Kacheln der Spalte oder Reihe überspannt, in der es ursprünglich platziert wurde. Zum Beispiel istleftgleichbedeutend mitleft span-all. center,span-left,span-right,span-top, oderspan-bottom-
Der andere Wert wird standardmäßig mit
centerfestgelegt. Zum Beispiel istspan-leftgleichbedeutend mitcenter span-leftundcenterist gleichbedeutend mitcenter center.
Logische Gitter-Schlüsselwörter
Die logischen Gitter-Schlüsselwörter spezifizieren einen Bereich des Position-Area-Grids mit logischen Werten. Mit diesen Werten werden Position und Richtung durch die writing-mode und direction Einstellungen entweder des enthaltenden Blocks des Elements oder, im Fall der self Schlüsselwörter, des positionierten Elements selbst beeinflusst. Es gibt zwei Arten von logischen Schlüsselwörtern; generisch und explizit.
Generische logische Reihen- und Spalten-Schlüsselwörter
Die generischen logischen Schlüsselwörter verwenden dieselben Begriffe für die Inline- und Blockrichtungen, wobei die Richtung durch die Position des Schlüsselbegriffs innerhalb eines Paares von <position-area> Werten bestimmt wird. Der erste Wert definiert die Blockrichtung und der zweite Wert die Inline-Richtung. Sie können einen oder zwei Schlüsselbegriffe aus der folgenden Liste auswählen. Das Festlegen von zwei aus dieser Liste definiert eine einzelne bestimmte Gitterkachel. Die Position oder Richtung des Schlüsselbegriffs ist:
start-
Der Anfang der Block- oder Inline-Richtung des Grids, berechnet aus dem Schreibmodus des enthaltenen Blocks.
end-
Das Ende der Block- oder Inline-Richtung des Grids, berechnet aus dem Schreibmodus des enthaltenen Blocks.
self-start-
Der Anfang der Block- oder Inline-Richtung des Grids, berechnet aus dem eigenen Schreibmodus des Elements.
self-end-
Das Ende der Block- oder Inline-Richtung des Grids, berechnet aus dem eigenen Schreibmodus des Elements.
center-
Die Mitte der Blockrichtung des Grids (wenn dieses Schlüsselwort zuerst angegeben wird) oder Inline-Richtung (wenn dieses Schlüsselwort als zweites angegeben wird).
Zum Beispiel beschreiben start end und self-start self-end beide die Position am Anfang der Blockrichtung und dem Ende der Inline-Richtung. Mit writing-mode: horizontal-tb ist dies die obere rechte Ecke des Ankerelements, während es mit writing-mode: vertical-rl die untere rechte Ecke des Ankers ist.
Generische logische Spanning-Reihen- und Spalten-Schlüsselwörter
Die generischen logischen Spanning-Schlüsselwörter — in Kombination mit einem logischen Reihen- oder Spalten-Schlüsselwort — spezifizieren eine zweite Gitterkachel, in die sich der Positionsbereich ausdehnen soll. Wenn eine solche Kombination als position-area Eigenschaftswert gesetzt wird, wird ein ausgewähltes Element zunächst in der Mitte der angegebenen Reihe oder Spalte platziert, und es erstreckt sich dann in die im Spanning-Schlüsselwort angegebene Richtung, wobei zwei Gitterkacheln überspannt werden:
span-start-
Überspannt die mittlere Kachel und die Start-Kachel der Grid-Reihe/spalte, bezogen auf den Schreibmodus des umschließenden Blocks des Elements.
span-end-
Überspannt die mittlere Kachel und die End-Kachel der Grid-Reihe/spalte, bezogen auf den Schreibmodus des umschließenden Blocks des Elements.
span-self-start-
Überspannt die mittlere Kachel und die Start-Kachel der Grid-Reihe/spalte, bezogen auf den eigenen Schreibmodus des positionierten Elements.
span-self-end-
Überspannt die mittlere Kachel und die End-Kachel der Grid-Reihe/spalte, berechnet aus dem eigenen Schreibmodus des Elements.
Zum Beispiel spezifizieren start span-end und self-start span-self-end beide einen Positionsbereich, der in der Mitte der Start-Blockreihe beginnt und sich über die Kacheln in dieser Reihe erstreckt, die in der Inline-Mitte und -Ende liegen. Mit writing-mode: horizontal-tb erstreckt sich dies über die obere Mitte und das obere rechte Ende des Ankers, während es mit writing-mode: vertical-rl über die rechte Mitte und das untere rechte Ende des Ankers spannt.
Explizite logische Inline- und Block-Schlüsselwörter
Die expliziten logischen Inline- und Block-Reihen- und Spalten-Schlüsselwörter beziehen sich ausdrücklich auf eine Block- (Reihe) oder Inline- (Spalte) Position. Sie können ein Schlüsselwort für die Blockrichtung und eines für die Inline-Richtung angeben, um eine einzige bestimmte Gitterkachel auszuwählen. Im Gegensatz zu den generischen logischen Schlüsselwortwerten spielt die Schlüsselwortreihenfolge keine Rolle. Das Deklarieren von zwei Schlüsselwörtern in derselben Achse macht den Wert jedoch ungültig.
block-start-
Der Beginn der Blockrichtung des Grids, berechnet aus dem Schreibmodus des enthaltenen Blocks.
block-end-
Das Ende der Blockrichtung des Grids, berechnet aus dem Schreibmodus des enthaltenen Blocks.
inline-start-
Der Beginn der Inline-Richtung des Grids, berechnet aus dem Schreibmodus des enthaltenen Blocks.
inline-end-
Das Ende der Inline-Richtung des Grids, berechnet aus dem Schreibmodus des enthaltenen Blocks.
Zum Beispiel spezifiziert block-start inline-end die Kachel am Beginn der Blockrichtung und am Ende der Inline-Richtung. Mit writing-mode: horizontal-tb wäre dies die Kachel oben rechts am Anker, während es mit writing-mode: vertical-rl die Kachel unten rechts wäre.
Hinweis:
Die Spezifikation definiert self-Äquivalente dieser Schlüsselwörter — block-self-start, block-self-end, inline-self-start, und inline-self-end. Diese werden jedoch derzeit von keinem Browser unterstützt.
Explizite Spanning-Schlüsselwörter für Inline- und Blockrichtung
Die expliziten logischen Spanning-Schlüsselwörter — in Kombination mit einem logischen Reihen- oder Spalten-Schlüsselwort — spezifizieren eine zweite Gitterkachel, in die sich der Positionsbereich ausdehnen soll. Wenn eine solche Kombination als position-area Eigenschaftswert festgelegt wird, wird ein ausgewähltes Element zunächst in der Mitte der angegebenen Reihe oder Spalte platziert, basierend auf dem Schreibmodus des umschließenden Blocks, und es erstreckt sich dann in die im Spanning-Schlüsselwort spezifizierte Richtung, wobei zwei Gitterkacheln überspannt werden:
span-block-start-
Überspannt die mittlere Kachel und die block-start Kachel der angegebenen Inline-Spalte.
span-block-end-
Überspannt die mittlere Kachel und die block-end Kachel der angegebenen Inline-Spalte.
span-inline-start-
Überspannt die mittlere Kachel und die inline-start Kachel der angegebenen Blockreihe.
span-inline-end-
Überspannt die mittlere Kachel und die inline-end Kachel der angegebenen Blockreihe.
Zum Beispiel wählt block-end span-inline-start die mittlere Kachel der End-Blockreihe aus und spannt sich über die Kacheln in dieser Reihe, die sich in der Inline-Mitte und -Start-Spalten befinden. Mit writing-mode: horizontal-tb spannt dies die untere Mitte und die unterste linke Gitterkachel, während es mit writing-mode: vertical-rl die linke Mitte und die oberste linke Gitterkachel überspannt.
Hinweis:
Die Spezifikation definiert self-Äquivalente dieser Schlüsselwörter, zum Beispiel — span-self-block-start, span-self-block-end, span-self-inline-start, und span-self-inline-end. Diese werden jedoch derzeit von keinem Browser unterstützt.
Hinweis:
Der Versuch, ein Reihen- oder Spalten-Schlüsselwort mit einem unangemessenen Spanning-Schlüsselwort zu kombinieren, führt zu einem ungültigen Eigenschaftswert. Zum Beispiel ist block-end span-block-end ungültig — Sie können die mittlere block-end Reihe nicht auswählen und dann versuchen, eine Kachel weiter in die block-end Richtung zu spannen.
Standardwerte der logischen Gitter-Schlüsselwörter
Wenn nur ein einziges logisches <position-area> Schlüsselwort angegeben wird, wird der andere Wert wie folgt impliziert:
start,end,self-start, oderself-end-
Der andere Wert wird als derselbe wie der erste Wert standardmäßig angenommen und wählt die Gitterzelle am Anfang der Reihe und Spalte oder am Ende der Reihe und Spalte aus.
span-start,span-self-start,span-end,span-self-end-
Der andere Wert wird standardmäßig mit
centerfestgelegt. Zum Beispiel istspan-startgleichbedeutend mitspan-start center. block-start,block-end,inline-start, oderinline-end-
Der andere Wert wird als
span-allstandardmäßig angenommen, um alle drei Kacheln der Spalte oder Reihe, die gesetzt wurde, zu überspannen. Zum Beispiel istblock-startgleichbedeutend mitblock-start span-all. span-block-start,span-block-end,span-inline-start, oderspan-inline-end-
Der andere Wert wird standardmäßig mit
centerfestgelegt. Zum Beispiel istspan-inline-startgleichbedeutend mitspan-inline-start center.
Koordinaten-Gitter-Schlüsselwörter
Diese Schlüsselwörter spezifizieren die Zellen des position-area Grids mit x- und y-Koordinatenwerten. Die Position/Richtung wird von writing-mode und/oder direction Einstellungen auf entweder einem Element's enthaltenden Block oder, im Fall der self Schlüsselwörter, dem Element selbst betroffen.
Jedoch sind die Gitterzellen gemäß physikalischen Achsen und nicht gemäß Block/Inline-Richtungen definiert:
- Für
writing-mode: horizontal-tbundvertical-lrverläuft die x-Achse von links nach rechts und die y-Achse von oben nach unten. - Für
writing-mode: horizontal-tb; direction: rtlundwriting-mode: vertical-rlverläuft die x-Achse von rechts nach links und die y-Achse von oben nach unten.
Mit Koordinatenreihen- und Spalten-Schlüsselwörtern können Sie ein Schlüsselwort von der x-Achse und eines von der y-Achse angeben, um eine einzige bestimmte Gitterkachel zu definieren.
Die Schlüsselwörter auf der x-Achse umfassen:
x-start-
Die start-Kachel entlang der x-Achse des Grids, berechnet aus dem Schreibmodus des umschließenden Blocks.
x-end-
Die End-Kachel entlang der x-Achse des Grids, berechnet aus dem Schreibmodus des umschließenden Blocks.
self-x-start-
Die start-Kachel entlang der x-Achse des Grids, berechnet aus dem eigenen Schreibmodus des Elements.
self-x-end-
Die End-Kachel entlang der x-Achse des Grids, berechnet aus dem eigenen Schreibmodus des Elements.
center-
Die Mitte der x-Achse des Grids, berechnet aus dem eigenen Schreibmodus des Elements.
Die Schlüsselwörter auf der y-Achse umfassen:
y-start-
Die start-Kachel entlang der y-Achse des Grids, berechnet aus dem Schreibmodus des umschließenden Blocks.
y-end-
Die End-Kachel entlang der y-Achse des Grids, berechnet aus dem Schreibmodus des umschließenden Blocks.
self-y-start-
Die start-Kachel entlang der y-Achse des Grids, berechnet aus dem eigenen Schreibmodus des Elements.
self-y-end-
Die End-Kachel entlang der y-Achse des Grids, berechnet aus dem eigenen Schreibmodus des Elements.
center-
Die Mitte der y-Achse des Grids, berechnet aus dem eigenen Schreibmodus des Elements.
Zum Beispiel wählen x-end y-start und self-x-end self-y-start beide die Gitterzelle am Ende der x-Achse und am Anfang der y-Achse aus. Mit writing-mode: horizontal-tb ist dies die Zelle oben rechts am Anker, während sie mit writing-mode: vertical-rl oben links ist.
Koordinaten-Spanning-Schlüsselwörter
Wenn sie mit einem Koordinaten-Reihen- oder Spalten-Schlüsselwort kombiniert werden, spezifizieren die Koordinaten-Spanning-Schlüsselwörter eine zweite Grid-Kachel, in die sich der Positionsbereich ausdehnen soll. Wenn eine solche Kombination als position-area Eigenschaftswert gesetzt wird, wird ein ausgewähltes Element zunächst in der Mitte der angegebenen Reihe oder Spalte platziert, und es erstreckt sich dann in die im Spanning-Schlüsselwort spezifizierte Richtung, wobei zwei Gitterkacheln überspannt werden:
span-x-start-
Überspannt die mittlere Kachel und die x-start Kachel der angegebenen y-Achsen-Reihe.
span-x-end-
Überspannt die mittlere Kachel und die x-end Kachel der angegebenen y-Achsen-Reihe.
span-y-start-
Überspannt die mittlere Kachel und die y-start Kachel der angegebenen x-Achsen-Spalte.
span-y-end-
Überspannt die mittlere Kachel und die y-end Kachel der angegebenen x-Achsen-Spalte.
Zum Beispiel wählt y-end span-x-end die Kachel in der Mitte der End y-Reihe aus und erstreckt sich über die Kacheln in dieser Reihe, die sich in der x-Mitte und x-Enden-Spalten befinden. Mit writing-mode: horizontal-tb würde der Positionsbereich das Gitter über die Kacheln in der unteren Mitte und unten rechts erstrecken, während es mit writing-mode: vertical-rl die untere Mitte und unten links spannt.
Hinweis:
Die Spezifikation definiert keine separaten Koordinaten self Spanning-Schlüsselwörter, aber diese sind nicht notwendig — die Spanning-Schlüsselwörter können mit beiden Koordinaten-Reihen- und Spalten-Schlüsselwörtern verwendet werden.
Standardwerte der Koordinaten-Gitter-Schlüsselwörter
Wenn nur ein einzelnes Koordinaten-Gitter-<position-area>-Schlüsselwort angegeben ist, wird der andere Wert wie folgt impliziert:
x-start,self-x-start,x-end,self-x-end,y-start,self-y-start,y-end, oderself-y-end-
Der andere Wert wird als
span-allstandardmäßig angenommen, wobei die Gitterkacheln ausgewählt werden, die alle drei Kacheln der Spalte oder Reihe, in der es ursprünglich platziert wurde, überspannen. Zum Beispiel istx-startgleichbedeutend mitx-start span-all. span-x-start,span-x-end,span-y-start,span-y-end,span-self-x-start,span-self-x-end,span-self-y-end, oderspan-self-y-start-
Der andere Wert wird standardmäßig mit
centerfestgelegt. Zum Beispiel istspan-startgleichbedeutend mitspan-start center.
span-all
span-all ist ein spezielles Schlüsselwort, das mit allen der oben aufgeführten Reihen- und Spalten-Schlüsselwörtern verwendet werden kann. Wenn Sie zwei Werte angeben — ein Reihen-/Spalten-Schlüsselwort und span-all, wird das Element in der angegebenen Reihe oder Spalte platziert, und es überspannt dann alle Kacheln in dieser Reihe oder Spalte.
Beispiele
Siehe die position-area Eigenschaftsseite.
Für detaillierte Informationen zu Ankerfunktionen und -verwendung, siehe die CSS Ankerpositionierung Modul-Landing-Page und den Verwenden von CSS Ankerpositionierung Leitfaden.
Spezifikationen
| Specification |
|---|
| CSS Anchor Positioning # position-area |
Browser-Kompatibilität
Loading…
Siehe auch
position-areaanchor-nameposition-anchoranchor()Funktion- Verwenden von CSS Ankerpositionierung Leitfaden
- Fallback-Optionen und bedingtes Ausblenden bei Überlauf Leitfaden
- CSS Ankerpositionierung Modul