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 vor der Verwendung auf produktiven Webseiten.

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

Anfangswertwie 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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
position-try
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

Siehe auch