position-try

Limited availability

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

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

Bestandeigenschaften

Diese Eigenschaft ist eine Kurzform 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 position-try-Kurzform kann Werte für position-try-fallbacks, oder position-try-order und position-try-fallbacks in dieser Reihenfolge spezifizieren. Wenn position-try-order ausgelassen wird, wird es auf den Initialwert der Eigenschaft gesetzt, der normal ist, was bedeutet, dass die Optionen für die Rückfallpositionierung in der Reihenfolge ausprobiert werden, in der sie in der Eigenschaft erscheinen.

Formale Definition

Anfangswert	wie die jeweiligen Kurzschreibweisen: `position-try-fallbacks`: `none` `position-try-order`: `normal`
Anwendbar auf	absolut positionierte Elemente
Vererbt	Nein
Prozentwerte	wie die jeweiligen Kurzschreibweisen: `position-try-fallbacks`: Nein `position-try-order`: Nein
Berechneter Wert	wie die jeweiligen Kurzschreibweisen: `position-try-fallbacks`: wie angegeben `position-try-order`: wie angegeben
Animationstyp	wie die jeweiligen Kurzschreibweisen: `position-try-fallbacks`: diskret `position-try-order`: diskret

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 Verwendung von `position-try`

Dieses Demo zeigt die Wirkung von position-try.

HTML

Das HTML enthält 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 erhält der Anker einen anchor-name und hat einen position-Wert von absolute darauf gesetzt. Wir positionieren ihn im oberen Teil des Viewports mit top- und left-Werten:

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

css

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

.infobox {
  color: darkblue;
  background-color: azure;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 1rem;
  text-align: center;
}

form {
  position: fixed;
  bottom: 2px;
  right: 2px;
}

Wir fügen dann eine benutzerdefinierte Positionsoption — --custom-bottom — hinzu, die das Element unter dem Anker positioniert und ihm einen entsprechenden Abstand 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 und eine position-try-fallbacks-Liste gibt, die nur unsere benutzerdefinierte Rückfalloption 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 unter seinem Anker, obwohl es zunächst über diesem positioniert wurde. Dies geschieht, weil unter dem Anker mehr vertikaler Platz vorhanden ist als darüber. Die most-height-Versuchsreihenfolge bewirkt, dass die --custom-bottom-Rückfalloption angewendet wird, wodurch das positionierte Element an der Stelle platziert wird, die seinem Containerblock die größte Höhe gibt.

Spezifikationen

Specification
CSS Anchor Positioning # position-try-prop

Browser-Kompatibilität

Siehe auch

position-area
position-try-fallbacks
position-try-order
Die @position-try-At-Regel
Der <position-area>-Wert
CSS-Ankerpositionierung Modul
Verwendung der CSS-Ankerpositionierung Leitfaden
Rückfalloptionen und bedingtes Verbergen bei Überlauf Leitfaden