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 leerzeichengetrennten benutzerdefinierten Positionsoptionsnamen oder <try-tactic>s oder einem position-area Wert angegeben werden.

none

Der Standardwert. Es sind keine Fallback-Optionen für die Position gesetzt.

<try-tactic>

Vorgegebene Fallback-Optionen verschieben das positionierte Element, indem sie seine berechnete Position nehmen und es entlang einer bestimmten Achse des Ankers transformieren, wobei eventuelle Margin-Versätze gespiegelt werden. Mögliche Werte sind:

flip-block

Spiegelt die Position des Elements entlang der Blockachse.

flip-inline

Spiegelt die Position des Elements entlang der Inline-Achse.

flip-start

Spiegelt sowohl die Inline- als auch die Blockachsenwerte, indem die start Eigenschaften miteinander und die end Eigenschaften miteinander vertauscht werden.

position-area Wert

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

<dashed-ident>

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

Verankerungspositionierte Elemente sollten immer an einem geeigneten Ort erscheinen, mit dem der Benutzer interagieren kann, wenn möglich, unabhängig davon, wo sich ihr Anker befindet. Um zu verhindern, dass das positionierte Element den Viewport überläuft, ist es oft notwendig, seine Position zu ändern, wenn sich der Anker dem Rand seines enthaltenden Elements oder des Viewports nähert.

Dies wird erreicht, indem eine oder mehrere Fallback-Optionen für die Position in der position-try-fallbacks Eigenschaft bereitgestellt werden. Wenn die anfängliche Position des positionierten Elements überlaufen würde, versucht der Browser jede Fallback-Positionsoption; die erste Fallback-Option, die das Überlaufen des enthaltenden Blocks verhindert, wird angewendet. Standardmäßig versucht der Browser diese in der Reihenfolge, in der sie in der Liste erscheinen, und wendet die erste an, die er findet, die das Überlaufen des positionierten Elements stoppt.

Wenn keine Option gefunden werden kann, um das positionierte Element vollständig auf dem Bildschirm zu platzieren, wird der Browser das positionierte Element in seiner Standardposition anzeigen, bevor irgendwelche Fallback-Optionen angewendet wurden.

Für detaillierte Informationen zu Ankerfunktionen und der Verwendung von Fallback-Optionen für die Position, siehe die CSS-Ankerpositionierung Modul-Landingpage und den Umgang mit Überlauf: Fallbacks versuchen und bedingtes Ausblenden Leitfaden.

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

flip-block

Spiegelt die Position des Elements entlang der Blockachse, so dass es die gleiche Entfernung vom Anker, jedoch auf der gegenüberliegenden Seite davon erscheint. Anders ausgedrückt, es spiegelt die Position des Elements entlang einer Inline-Achse, die durch das Zentrum des Ankers verläuft. Zum Beispiel, wenn das positionierte Element begann, an der Oberseite des Ankers überzulaufen, würde dieser Wert die Position an den unteren Rand umklappen.

flip-inline

Spiegelt die Position des Elements entlang der Inline-Achse, so dass es die gleiche Entfernung vom Anker, jedoch auf der gegenüberliegenden Seite davon erscheint. Anders ausgedrückt, es spiegelt die Position des Elements entlang einer Blockachse, die durch das Zentrum des Ankers verläuft. Zum Beispiel, wenn das positionierte Element begann, an der linken Seite des Ankers überzulaufen, würde dieser Wert die Position an die rechte Seite umklappen.

flip-start

Spiegelt die Position des Elements entlang einer diagonal durch das Zentrum des Ankers verlaufenden Achse, die durch den Punkt am Schnittpunkt der Blockachsstartposition und der Inlineachsstartposition und den Punkt am Schnittpunkt der Blockachs-Endposition und der Inlineachs-Endposition verläuft. Zum Beispiel, wenn das positionierte Element begann, an der linken Seite des Ankers überzulaufen, würde dieser Wert das positionierte Element an die Oberseite umklappen.

Eine einzelne Fallback-Option für die Position kann mehr als einen <try-tactic> oder dashed-ident Optionen oder eine Kombination von beiden enthalten, indem sie als eine einzelne leerzeichengetrennte Option deklariert wird:

• Im Falle von mehreren vordefinierten <try-tactic> Optionen werden ihre Transformationen zusammengefügt.
• Im Falle der Deklaration einer vordefinierten <try-tactic> und einer <dashed-ident> benannten @position-try Option wird zuerst die benutzerdefinierte Positionsoption 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 Verwendung von ein paar vordefinierten <try-tactic> Fallback-Optionen.

HTML

Das HTML enthält zwei <div> Elemente, die zu einem Anker und einem Anker-positionierten Element werden:

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

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

CSS

Wir stylen 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 Margen, um ihn irgendwo in der Nähe des mittleren Teils 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 sich auf den anchor-name des Ankers bezieht, um die beiden miteinander zu verbinden, und sie ist an der oberen linken Ecke des Ankers mittels einer position-area befestigt.

Wir fügen eine position-try-fallbacks Liste hinzu (und deklarieren sie erneut mit der Kurzform position-try, falls der Langform-Name der Eigenschaft noch nicht unterstützt wird) und geben zwei vordefinierte Fallback-Optionen für die Position an, um zu verhindern, dass sie überläuft, wenn der Anker in die Nähe des Viewportrands kommt, indem sie entlang der Inline- oder Blockachse des Ankers umgeklappt wird.

.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, so dass der Anker die Ränder nähert:

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

Wenn Sie allerdings den Anker in die Nähe der oberen linken Ecke des Viewports bewegen, bemerken Sie ein Problem – da das positionierte Element beginnt, in Richtung der Block- und Inline-Richtung überzulaufen, klappt es zurück zu seiner ursprünglichen oberen linken Position und überläuft in beide Richtungen, was nicht das ist, was wir wollen.

Das liegt daran, dass wir dem Browser nur die Positionsoptionen von flip-block oder flip-inline gegeben haben. Wir haben ihm nicht die Möglichkeit gegeben, beide gleichzeitig auszuprobieren. Das nächste Beispiel zeigt Ihnen, wie Sie dieses Problem beheben können.

Verwenden wir eine kombinierte Fallback-Option, um das Problem zu beheben, das wir im vorherigen Demo festgestellt haben.

HTML und CSS

Der gesamte HTML und CSS in diesem Demo ist derselbe, außer für den Code des positionierten Elements. In diesem Fall erhält es eine dritte Fallback-Option für die Position: 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 Fallback-Option für die Position bedeutet, dass der Browser flip-block dann flip-inline versucht, um ein Überlaufen zu vermeiden, und wenn diese Fallbacks fehlschlagen, wird er die beiden kombinieren und die Position des Elements gleichzeitig in Block- und Inline-Richtung umklappen. Jetzt, wenn Sie den Anker an die oberen und linken Ränder des Viewports scrollen, wird das positionierte Element über an die untere rechte Seite umgeklappt.

Dieses Beispiel zeigt einige position-area Fallback-Optionen für die Positionsoption in Aktion.

HTML und CSS

Der gesamte HTML und CSS in diesem Demo ist derselbe, außer für den Code des positionierten Elements. In diesem Fall sind unsere Fallback-Optionen für die Positionsoption alle position-area Werte - oben, oben rechts, rechts, unten rechts, unten, unten links und links.

Das bedeutet, dass das positionierte Element eine angemessene Position zum Anzeigen finden wird, unabhängig davon, in welchen Viewporträndern der Anker in der Nähe liegt. Dieser Ansatz ist etwas langatmiger als der Ansatz der vordefinierten Werte, aber er ist auch detaillierter 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 sehen Sie sich die Auswirkungen dieser Fallback-Optionen für die Position an, wenn sich der Anker in der Nähe des Randes des Viewports befindet.

Siehe die @position-try Referenzseite.

• position-try
• position-try-order
• @position-try Regel
• position-area
• <position-area> Wert
• Umgang mit Überlauf: Fallbacks versuchen und bedingtes Ausblenden Leitfaden
• CSS-Ankerpositionierung verwenden Leitfaden
• CSS-Ankerpositionierung Modul