position-try-order | CSS-Tricks

CSS Almanac → Eigenschaften → P → position-try-order

Juan Diego Rodríguez am 13. Aug. 2024

Die CSS-Eigenschaft position-try-order legt die Reihenfolge der Positionen fest, die ein Zielelement versucht zu verwenden, um sich um ein Ankerelement herum anzuzeigen. Man kann es sich als das Festlegen einer bevorzugten Position für das Zielelement vorstellen, mit zusätzlichen Optionen, falls die ideale Position nicht genügend Platz bietet.

Zum Beispiel können wir dem Zielelement sagen, dass es sich unter Verwendung der Option mit der größten Breite (most-width) positionieren soll.

.target {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: top right;

  position-try-options: flip-inline, flip-start;
  position-try-order: most-width;
}

Und wenn diese Option verwendet wird, werden die verbleibenden Optionen neu geordnet, wobei die größten Optionen zuerst kommen. Die Eigenschaft erfordert die Kopplung mit der Eigenschaft position-anchor, um ein Element zu registrieren, an dem sich das Zielelement verankern kann, sowie mit der Eigenschaft position-try-fallbacks, welche die Optionen definiert, die durch position-try-order sortiert werden. Das liegt daran, dass sie Teil der CSS Anchor Positioning Spezifikation ist – einer Gruppe von Funktionen, die zusammenarbeiten, um ein Element (das Target) relativ zu einem anderen (dem Anchor) zu positionieren.

Hinweis: Die CSS-Spezifikationen beziehen sich auf die Eigenschaft als position-try-fallbacks, aber Chromium-Browser-Implementierungen nennen sie zum Zeitpunkt der Erstellung dieses Artikels position-try-options bei gleichem Wertesatz. Entweder wird sich die Spezifikation noch ändern oder die Browser werden ihre Implementierungen in Zukunft zur Konsistenz aktualisieren. Bis dahin wird empfohlen, stattdessen die Kurzschreibweise position-try zu verwenden. Infolgedessen verwenden die Demos in diesem Artikel position-try-options.

Syntax

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

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

Initialwert: normal
Anwendbar auf: absolut positionierte Elemente
Vererbt: nein
Prozentwerte: n/v
Berechneter Wert: wie angegeben
Kanonische Reihenfolge: gemäß Grammatik
Animationstyp: diskret

Werte

/* <try-size> keywords */
position-try-order: normal;
position-try-order: most-width;
position-try-order: most-height;
position-try-order: most-block-size;
position-try-order: most-inline-size;

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

normal: Die Positionsoptionen werden in der Reihenfolge ausprobiert, die in der Eigenschaft position-try-fallbacks angegeben ist.
<try-size>: Bestimmt für jede Positionsoption die resultierende Größe des "inset-modified containing block" für das Ziel. Sortiert dann die Liste der Positionsoptionen nach dieser Größe, wobei die größte in der gewählten Richtung zuerst kommt. Um die Richtung zu wählen, gibt es vier Schlüsselwörter:
- most-width (größte Breite)
- most-height (größte Höhe)
- most-block-size (größte Block-Größe)
- most-inline-size (größte Inline-Größe)

Was ist der „inset-modified“ Containing Block?

Die vorherige Syntax wirkt etwas kompliziert. Zumindest für mich war es schwer, sie vollständig zu verstehen, ohne zu wissen, was ein „inset-modified containing block“ ist. Um das zu erklären, sollten wir darauf zurückgehen, was genau ein Containing Block (umschließender Block) ist.

Bei einem regulären Element mit einer static Position ist der Containing Block der nächste Vorfahre, der ein Block-Element ist. Im folgenden HTML ist zum Beispiel das <main>-Element der Containing Block des <div>s.

<body>
   <main> <!-- The containing block of <div> -->
     <div></div>
   </main>
</body>

Absolut positionierte Elemente verlassen den normalen Dokumentfluss und damit auch ihren ursprünglichen Containing Block. Ihr neuer Containing Block ist der nächste Vorfahre mit einer anderen Position als static. Falls kein solcher existiert, ist es standardmäßig der Viewport. Im Fall eines regulären Anchor-Elements ist sein Containing Block also der gesamte Bildschirm.

Nach der Spezifikationsdefinition gilt nun: „Für eine absolut positionierte Box reduzieren die Inset-Eigenschaften effektiv den Containing Block, in dem sie dimensioniert und positioniert wird, um die angegebenen Beträge. Das resultierende Rechteck wird als 'inset-modified containing block' bezeichnet.“

Bei einem normal absolut positionierten Element wird sein 'inset-modified containing block' logisch durch seine Inset-Eigenschaften (top, left, right, bottom) bestimmt. Das lässt sich im folgenden Beispiel leicht erkennen:

.absolute-position {
  position: absolute;
  top: 80px;
  right: 120px;
  bottom: 180px;
  left: 90px;
}

Example of an inset-modified containing block

Sein Containing Block ist der gesamte Viewport, und sein 'inset-modified containing block' ist 80px von oben, 120px von rechts, 180px von unten und 90px von links entfernt.

Im Falle eines Anchor-Elements kann der Containing Block in ein Gitter unterteilt werden, das durch vier imaginäre Linien getrennt ist:

Der Anfang des Containing Blocks des Ziels.
Der Anfang des Anker-Elements oder anchor(start).
Das Ende des Anker-Elements oder anchor(end).
Das Ende des Containing Blocks des Ziels.

Example of how we can think of the containing block of an anchor element

Der 'inset-modified containing block' des Ziels ist der Bereich auf dem Gitter, in dem es platziert wird, zum Beispiel das folgende Zielelement…

.target {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: top right;

  height: 50px;
  idth: 50px;
}

…wird den folgenden Containing Block haben.

Wir können genau sehen, wie der 'inset-modified containing block' wächst und schrumpft, wenn wir height und width des Ziels auf 100% setzen.

Verwendung von `position-try-order`

Da wir nun wissen, was der 'inset-modified containing block' für ein Zielelement ist, können wir sehen, wie die Eigenschaft position-try-order entscheidet, welche Position ausgewählt wird. Zum Beispiel können wir die folgenden Elemente miteinander verknüpfen…

<main>
  <div class="anchor">Anchor</div>
  <div class="target">Target</div>
</main>

…unter Verwendung von Anchor Positioning.

.anchor {
  anchor-name: --my-anchor;
}

.target {
  position: absolute;
  position-anchor: --my-anchor;
}

Wenn wir das .target oben rechts von seinem .anchor positionieren, wird es überlaufen, sobald wir nach unten scrollen. Wir könnten also eine neue position-try-fallbacks Option hinzufügen, um es nach unten rechts zu spiegeln, wann immer das passiert:

.target {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: top right;
  position-try-options: flip-block;
}

Zum Abschluss wählen wir mit dem Schlüsselwort most-height standardmäßig die Position, die dem 'inset-modified containing block' des .target-Elements die größte Höhe verleiht.

.target {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: top right;
  position-try-options: flip-block;
  position-try-order: most-height;
}

Auch das können wir in Aktion sehen, wenn wir height und width des .target-Elements auf 100% setzen.

Der Containing Block ist in der Größe veränderbar. Bewegen Sie ihn herum, um zu sehen, wie sich die Position ändert, wenn sich der verfügbare Platz ändert!

Demo

Spezifikation

Die Eigenschaft position-try-order ist in der Spezifikation CSS Anchor Positioning Module Level 1 definiert, die sich zum Zeitpunkt der Erstellung dieses Artikels im Status „Working Draft“ befindet. Das bedeutet, dass sich bis zu dem Zeitpunkt, an dem das Feature eine formale „Candidate Recommendation“ für die Implementierung wird, noch viel ändern kann.