position-try-fallbacks

/* Default value: no try fallback options */
position-try-fallbacks: none;

/* Single try option */
position-try-fallbacks: flip-block;
position-try-fallbacks: top;
position-try-fallbacks: --custom-try-option;

/* Multiple value combination option */
position-try-fallbacks: flip-block flip-inline;

/* Multiple values */
position-try-fallbacks: flip-block, flip-inline;
position-try-fallbacks: top, right, bottom;
position-try-fallbacks: --custom-try-option1, --custom-try-option2;
position-try-fallbacks:
  flip-block,
  flip-inline,
  flip-block flip-inline;
position-try-fallbacks:
  flip-block,
  --custom-try-option,
  --custom-try-option flip-inline,
  right;

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

Die position-try-fallbacks Eigenschaft kann entweder als Schlüsselwortwert none oder als kommagetrennte Liste von einem oder mehreren durch Leerzeichen getrennten benutzerdefinierten Positionsoptionsnamen oder <try-tactic>s oder einem position-area Wert angegeben werden.

none

Der Standardwert. Es sind keine Positionierungsversuchs-Fallback-Optionen festgelegt.

<try-tactic>

Vorgegebene Fallback-Optionen verschieben das positionierte Element, indem sie seine berechnete Position nehmen und es über eine bestimmte Achse des Ankers transformieren, wobei alle Randoffsets gespiegelt werden. Mögliche Werte sind:

flip-block

Dreht die Position des Elements entlang der Blockachse.

flip-inline

Dreht die Position des Elements entlang der Inlineachse.

flip-start

Dreht die Werte sowohl der Inline- als auch der Blockachse und vertauscht die start-Eigenschaften miteinander und die end-Eigenschaften miteinander.

position-area Wert

Positioniert das Element relativ zu den Kanten seines zugeordneten Ankerelements, indem es das positionierte Element auf einem oder mehreren Kacheln eines impliziten 3x3 position area grid platziert, basierend auf dem angegebenen <position-area> Wert; der Effekt ist derselbe wie bei einer benutzerdefinierten @position-try Fallback-Option, die nur einen position-area Deskriptor enthält.

<dashed-ident>

Fügt eine benutzerdefinierte @position-try Option zur Liste der Fallback-Optionen hinzu, deren identifizierender Name mit dem angegebenen dashed-ident übereinstimmt. Wenn keine benutzerdefinierte Positionsoption mit diesem Namen existiert, wird die Option ignoriert.

Ankerpositionierte Elemente sollten immer an einem Ort erscheinen, an dem der Benutzer bequem interagieren kann, soweit möglich, unabhängig davon, wo ihr Anker positioniert ist. Um zu verhindern, dass das positionierte Element den Viewport überläuft, ist es oft notwendig, seinen Standort zu ändern, wenn sich sein Anker nahe am Rand seines enthaltenden Elements oder des Viewports befindet.

Dies wird erreicht, indem eine oder mehrere Positionierungsversuche in der position-try-fallbacks Eigenschaft bereitgestellt werden. Wenn die ursprüngliche Position des positionierten Elements überläuft, versucht der Browser jede Fallback-Positionsoption; die erste Fallback-Option, die nicht dazu führt, dass das Element seinen enthaltenden Block überläuft, wird angewendet. Standardmäßig versucht der Browser, sie in der Reihenfolge der Liste anzuwenden und wendet die erste an, die verhindert, dass das positionierte Element überläuft.

Wenn keine Option gefunden werden kann, die das positionierte Element vollständig auf dem Bildschirm platziert, stellt der Browser das positionierte Element an seiner Standardposition dar, bevor alle Versuch-Fallback-Optionen angewendet wurden.

Für detaillierte Informationen zu Anker-Funktionen und zur Verwendung von Positionsversuchen, siehe das CSS anchor positioning Modul und den Fallback-Optionen und bedingtes Ausblenden bei Überlauf Leitfaden.

In der Spezifikation als <try-tactic> bezeichnet, verschieben die vordefinierten Werte das positionierte Element, indem sie seine berechnete Position nehmen und es über eine bestimmte Achse des Ankers transformieren. Die vordefinierten Werte sind:

flip-block

Dreht die Position des Elements entlang der Blockachse so, dass es den gleichen Abstand vom Anker entfernt erscheint, jedoch auf der gegenüberliegenden Seite. Anders gesagt, es spiegelt die Position des Elements über eine Inlineachse, die durch die Mitte des Ankers verläuft. Als Beispiel: Wenn das positionierte Element anfängt, oben am Anker überzulaufen, würde dieser Wert die Position nach unten drehen.

flip-inline

Dreht die Position des Elements entlang der Inlineachse, sodass es den gleichen Abstand vom Anker entfernt erscheint, jedoch auf der gegenüberliegenden Seite. Anders gesagt, es spiegelt die Position des Elements über eine Blockachse, die durch die Mitte des Ankers verläuft. Als Beispiel: Wenn das positionierte Element links vom Anker anfängt zu überlaufen, würde dieser Wert die Position nach rechts drehen.

flip-start

Spiegelt die Position des Elements über eine Achse, die diagonal durch die Mitte des Ankers verläuft, durch den Punkt am Schnittpunkt der Blockachse Start und der Inlineachse Start, sowie durch den Punkt am Schnittpunkt der Blockachse Ende und der Inlineachse Ende. Als Beispiel: Wenn das positionierte Element links vom Anker anfängt zu überlaufen, würde dieser Wert das positionierte Element nach oben umklappen.

Eine einzelne Positionsversuchs-Fallback-Option kann mehr als eine <try-tactic> oder dashed-ident Option oder eine Kombination aus beidem beinhalten, indem sie als eine einzige durch Leerzeichen getrennte Option deklariert werden:

• Im Fall von mehreren vordefinierten <try-tactic> Optionen werden deren Transformationen zusammengefügt.
• Im Fall eines vordefinierten <try-tactic> und einer <dashed-ident> benannten @position-try Option wird die benutzerdefinierte Positionsoption zuerst angewendet, dann wird die <try-tactic> Transformation angewendet.

position-area Werte können nicht auf diese Weise kombiniert werden.

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

<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}  

Dieses Beispiel zeigt die grundlegende Nutzung von ein paar vordefinierten <try-tactic> Fallback-Optionen.

HTML

Das HTML beinhaltet zwei <div> Elemente, die zu einem Anker und einem ankerpositionierten Element werden:

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

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

CSS

Wir gestalten das <body> Element sehr groß, um sowohl horizontales als auch vertikales Scrollen zu ermöglichen.

Der Anker erhält einen anchor-name und große Ränder, um ihn irgendwo in der Nähe des Zentrums des sichtbaren Abschnitts des <body> zu platzieren:

.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;
}

body {
  width: 1500px;
  height: 500px;
}

.anchor {
  anchor-name: --myAnchor;
  margin: 100px 350px;
}

Die Infobox erhält eine feste Positionierung, eine position-anchor Eigenschaft, die den anchor-name des Ankers referenziert, um die beiden zu verbinden, und wird mit der oberen linken Ecke des Ankers durch eine position-area verbunden.

Wir fügen eine position-try-fallbacks Liste hinzu (und deklarieren sie mit der position-try Kurzschrift nochmals, falls der Langhand-Eigenschaftsname noch nicht unterstützt wird), indem wir zwei vordefinierte Positionsversuchs-Fallback-Optionen bereitstellen, um zu verhindern, dass sie überläuft, wenn der Anker nahe am Rand des Viewports kommt, indem wir ihn entlang der Inline- oder Blockachse des Ankers drehen.

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

.infobox {
  position: fixed;
  position-anchor: --myAnchor;
  position-area: top left;

  position-try-fallbacks: flip-block, flip-inline;
  position-try: flip-block, flip-inline;
}

Ergebnis

Dies ergibt das folgende Ergebnis:

Versuchen Sie zu scrollen, sodass der Anker die Ränder erreicht:

• Wenn Sie den Anker in die Nähe des oberen Bereichs des Viewports bewegen, sehen Sie, dass sich das positionierte Element nach unten links vom Anker dreht, um ein Überlaufen zu vermeiden.
• Wenn Sie den Anker nach links in die Nähe des Viewports bewegen, sehen Sie, dass sich das positionierte Element nach oben rechts vom Anker dreht, um ein Überlaufen zu vermeiden.

Wenn Sie den Anker jedoch in Richtung der oberen linken Ecke des Viewports bewegen, merken Sie ein Problem — sobald das positionierte Element in der Block- und Inlinerichtung überläuft, dreht es sich zurück in seine Standardposition oben links und läuft in beide Richtungen über, was nicht unser Ziel ist.

Dies liegt daran, dass wir dem Browser nur die Option flip-block oder flip-inline gegeben haben. Wir haben ihm nicht die Option gegeben, beide gleichzeitig zu versuchen. Das nächste Beispiel zeigt, wie Sie dieses Problem beheben können.

Lassen Sie uns eine kombinierte Versuch-Fallback-Option verwenden, um das Problem zu beheben, das wir im vorherigen Beispiel festgestellt haben.

HTML und CSS

Alle HTML- und CSS-Codes in diesem Beispiel sind gleich geblieben, mit Ausnahme des Codes für das positionierte Element. In diesem Fall erhält es eine dritte Positionierungsversuchs-Fallback-Option: flip-block flip-inline:

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

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

body {
  width: 1500px;
  height: 500px;
}

.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;
}

.anchor {
  anchor-name: --myAnchor;
  margin: 100px 350px;
}

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

.infobox {
  position: fixed;
  position-anchor: --myAnchor;
  position-area: top left;

  position-try:
    flip-block,
    flip-inline,
    flip-block flip-inline;
  position-try-fallbacks:
    flip-block,
    flip-inline,
    flip-block flip-inline;
}

Ergebnis

Die dritte Positionsversuchs-Fallback-Option bedeutet, dass der Browser flip-block und dann flip-inline versucht, um ein Überlaufen zu verhindern, und wenn diese Fallbacks fehlschlagen, kombiniert er beide, indem er die Position des Elements sowohl in den Block- als auch Inlinerichtungen gleichzeitig dreht. Jetzt, wenn Sie den Anker in die obere und linke Ecke des Viewports scrollen, wird das positionierte Element zur unteren rechten Ecke gedreht.

Dieses Beispiel zeigt einige position-area Positionsversuchs-Fallback-Optionen in Aktion.

HTML und CSS

Alle HTML- und CSS-Codes in diesem Beispiel bleiben gleich, außer dem Code für das positionierte Element. In diesem Fall sind unsere Positionsversuchs-Fallback-Optionen alle position-area Werte — top, top right, right, bottom right, bottom, bottom left und left.

Das bedeutet, dass das positionierte Element eine angemessene Position findet, um angezeigt zu werden, unabhängig davon, an welchen Viewporträndern sich der Anker befindet. Dieser Ansatz ist etwas ausführlicher als der Ansatz mit vordefinierten Werten, aber er ist auch granulärer und flexibler.

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

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

body {
  width: 1500px;
  height: 500px;
}

.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;
}

.anchor {
  anchor-name: --myAnchor;
  margin: 100px 350px;
}

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

.infobox {
  position: fixed;
  position-anchor: --myAnchor;
  position-area: top left;

  position-try:
    top, top right, right,
    bottom right, bottom,
    bottom left, left;

  position-try-fallbacks:
    top, top right, right,
    bottom right, bottom,
    bottom left, left;
}

Ergebnis

Scrollen Sie die Seite und überprüfen Sie die Wirkung dieser Positionsversuchs-Fallback-Optionen, während sich der Anker den Rändern des Viewports nähert.

Siehe die @position-try Referenzseite.

• position-try
• position-try-order
• @position-try Regel
• position-area
• <position-area> Wert
• Fallback-Optionen und bedingtes Ausblenden bei Überlauf Leitfaden
• CSS-Anchor-Positionierung verwenden Leitfaden
• CSS-Anker-Positionierung Modul