position-try

Limited availability

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

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.

Die position-try-CSS-Eigenschaft ist eine Kurzschrift, die den Eigenschaften position-try-order und position-try-fallbacks entspricht.

Zusammengesetzte Eigenschaften

Diese Eigenschaft ist eine Kurzschrift für die folgenden CSS-Eigenschaften:

Syntax

css
/* position-try-fallbacks only */
position-try: normal flip-block;
position-try: top;
position-try: --custom-try-option;
position-try: flip-block flip-inline;
position-try: top, right, bottom;
position-try: --custom-try-option1, --custom-try-option2;
position-try:
  normal flip-block,
  right,
  --custom-try-option;

/* position-try-order and position-try-fallbacks */
position-try: normal none;
position-try:
  most-width --custom-try-option1,
  --custom-try-option2;
position-try:
  most-height flip-block,
  right,
  --custom-try-option;

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

Werte

Siehe position-try-order und position-try-fallbacks für Wertbeschreibungen.

Die Kurzschrift position-try kann Werte für position-try-fallbacks oder position-try-order und position-try-fallbacks in dieser Reihenfolge spezifizieren. Wenn position-try-order weggelassen wird, wird es auf den Initialwert der Eigenschaft gesetzt, der normal ist. Das bedeutet, dass die Fallback-Optionen in der Reihenfolge ausprobiert werden, in der sie in der Eigenschaft erscheinen.

Formale Definition

Initialer Wertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufabsolut positionierte Elemente
VererbtNein
Prozentwertewie die jeweiligen Kurzschreibweisen:
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypwie die jeweiligen Kurzschreibweisen:

Formale Syntax

position-try = 
  <'position-try-order'>? <'position-try-fallbacks'>  

<position-try-order> = 
  normal      |
  <try-size>  

<position-try-fallbacks> = 
  none                                                |
  [ [ <dashed-ident> || <try-tactic> ] | <'position-area'> ]#  

<try-size> = 
  most-width        |
  most-height       |
  most-block-size   |
  most-inline-size  

<try-tactic> = 
  flip-block   ||
  flip-inline  ||
  flip-start   

<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

Grundlegende position-try Anwendung

Diese Demo zeigt die Wirkung von position-try.

HTML

Das HTML umfasst zwei <div>-Elemente, die zu einem Anker und einem ankerpositionierten Element werden.

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

<div class="infobox">
  <p>This is an information box.</p>
</div>

CSS

Im CSS wird dem Anker ein anchor-name zugeordnet und ein position-Wert von absolute darauf gesetzt. Wir positionieren ihn in der oberen Hälfte des Ansichtsfensters mit den Werten von top und left:

css
.anchor {
  anchor-name: --myAnchor;
  position: absolute;
  top: 100px;
  left: 45%;
}

Wir fügen dann eine benutzerdefinierte Positionsoption — --custom-bottom — hinzu, die das Element unterhalb des Ankers positioniert und ihm einen entsprechenden Rand gibt:

css
@position-try --custom-bottom {
  top: anchor(bottom);
  bottom: unset;
  margin-top: 10px;
}

Wir positionieren das Element zunächst über seinem Anker und setzen dann einen position-try-Wert darauf, der ihm eine position-try-order von most-height gibt und eine position-try-fallbacks-Liste, die nur unsere benutzerdefinierte Fallback-Option enthält:

css
.infobox {
  position: fixed;
  position-anchor: --myAnchor;

  bottom: anchor(top);
  margin-bottom: 10px;
  justify-self: anchor-center;

  position-try: most-height --custom-bottom;
}

Ergebnis

Das Element erscheint unterhalb seines Ankers, obwohl es zuerst darüber positioniert ist. Dies tritt auf, weil es mehr vertikalen Raum unterhalb des Ankers gibt als darüber. Die most-height-Versuchsreihenfolge führt dazu, dass die --custom-bottom-Fallback-Option angewendet wird, wodurch das positionierte Element an der Stelle erscheint, die dem umgebenden Block die größte Höhe verleiht.

Spezifikationen

Specification
CSS Anchor Positioning
# position-try-prop

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch