@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 At-Regel wird verwendet, um eine benutzerdefinierte Positionierungsversuchs-Fallback-Option zu definieren, die zur Positionierung und Ausrichtung von verankerten Elementen verwendet werden kann. Eine oder mehrere Sätze von Positionierungsversuchs-Fallback-Optionen können über die position-try-fallbacks-Eigenschaft oder die position-try-Kurzform auf das verankerte Element angewendet werden. Wenn das positionierte Element an eine Stelle bewegt wird, an der es anfängt, den umgebenden Block oder den Ansichtsbereich zu überlaufen, wählt der Browser die erste gefundene Positionierungsversuchs-Fallback-Option, die das positionierte Element vollständig wieder auf den Bildschirm bringt.

Jede Positionsoption wird mit einem <dashed-ident> benannt und enthält eine Deskriptorliste, die Deklarationen festlegt, die Informationen wie Inset-Position, Rand, Größe und Selbstausrichtung definieren. Das <dashed-ident> wird verwendet, um die benutzerdefinierte Positionsoption in der position-try-fallbacks-Eigenschaft und der position-try-Kurzform zu referenzieren.

Für ausführliche Informationen zu Ankerfunktionen und der Verwendung von Positionierungsversuchs-Fallbacks siehe die Modul-Übersichtsseite CSS anchor positioning und die Anleitung Handling overflow: try fallbacks and conditional hiding.

Syntax

css
@position-try --try-option-name {
  descriptor-list
}

Hinweis: Der --try-option-name ist ein <dashed-ident>, der einen identifizierenden Namen für die benutzerdefinierte Positionsoption angibt, die dann verwendet werden kann, um diese Fallback-Option zur Liste der position-try-fallbacks hinzuzufügen.

Deskriptoren

Die Deskriptoren spezifizieren Eigenschaftswerte, die das Verhalten der benutzerdefinierten Positionsoption definieren, d. h., wo das positionierte Element platziert wird.

position-anchor

Gibt einen Wert der position-anchor-Eigenschaft an, der das Ankerelement definiert, an das das positionierte Element gebunden ist, indem es einen <dashed-ident>-Wert angibt, der gleich dem Wert der anchor-name-Eigenschaft des Ankerelements ist.

position-area

Gibt einen Wert der position-area-Eigenschaft an, der die Position des verankerten Elements relativ zum Anker definiert.

Inset-Eigenschafts-Deskriptoren

Geben anchor()-Funktionswerte an, die die Position der Kanten des verankerten Elements relativ zur Kante des Ankerelements definieren. Inset-Eigenschaftsdeskriptoren können festgelegt werden, die folgende Eigenschaften darstellen:

Rand-Eigenschaftsdeskriptoren

Geben den Rand an, der auf das verankerte Element gesetzt ist. Rand-Eigenschaftsdeskriptoren können festgelegt werden, die folgende Eigenschaften darstellen:

Größen-Eigenschaftsdeskriptoren

Geben anchor-size()-Funktionswerte an, die die Größe des verankerten Elements relativ zur Größe des Ankerelements definieren. Größen-Eigenschaftsdeskriptoren können festgelegt werden, die folgende Eigenschaften darstellen:

Eigenschaftsdeskriptoren zur Selbstausrichtung

Geben Sie den anchor-center-Wert an, um das verankerte Element relativ zur Mitte des Ankerelements, in Block- oder Inline-Richtung, auszurichten. Die Eigenschaften align-self und justify-self können den anchor-center-Wert annehmen.

Hinweis: Wenn eine benutzerdefinierte Positionsoption auf ein Element angewendet wird, haben die in der @position-try-At-Regel definierten Eigenschaftswerte Vorrang vor den Werten, die über Standard-CSS-Eigenschaften auf das Element gesetzt sind.

Formale Syntax

@position-try = 
  @position-try <dashed-ident> { <declaration-list> }

Beispiele

Verwendung von benutzerdefinierten Positionsoptionen

In diesem Beispiel definieren wir ein Ankerelement und ein verankertes Element und erstellen dann vier benannte benutzerdefinierte Positionierungsversuchs-Fallback-Optionen. Diese Optionen werden auf das positionierte Element angewendet, um sicherzustellen, dass dessen Inhalt immer sichtbar ist, egal wo sich das Ankerelement im Ansichtsbereich befindet.

HTML

Wir fügen zwei <div>-Elemente hinzu, die zu einem Anker und einem verankerten Element werden:

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

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

CSS

Wir gestalten zuerst das <body>-Element sehr groß, sodass wir den Anker und das positionierte Element im Ansichtsbereich sowohl horizontal als auch vertikal bewegen können:

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

Dem Anker wird eine anchor-name-Eigenschaft gegeben und ein position-Wert von absolute darauf gesetzt. Wir positionieren ihn dann irgendwo in der Nähe des Zentrums der anfänglichen <body>-Darstellung mit den Werten top und left:

css
.anchor {
  anchor-name: --myAnchor;
  position: absolute;
  top: 100px;
  left: 350px;
}

Als nächstes verwenden wir die @position-try-At-Regel, um vier benutzerdefinierte Positionsoptionen zu definieren, mit beschreibenden <dashed-ident>-Namen, um sie zu identifizieren und ihren Zweck zu beschreiben. Jede positioniert das verankerte Element an einem spezifischen Ort rund um das Ankerelement und gibt ihm einen entsprechenden 10px Rand zwischen dem verankerten Element und seinem Anker. Die Positionierung wird auf verschiedene Weisen gehandhabt, um die verschiedenen verfügbaren Techniken zu demonstrieren:

  • Die erste und letzte Positionsoption verwenden ein position-area.
  • Die zweite Positionsoption verwendet top mit einem anchor()-Wert und justify-self: anchor-center, um das verankerte Element in der Inline-Richtung auf dem Anker zu zentrieren.
  • Die dritte Positionsoption verwendet left mit einem anchor()-Wert, der in eine calc()-Funktion eingebettet ist, die 10px Abstand hinzufügt (anstatt den Abstand mit margin zu erstellen, wie es die anderen Optionen tun). Sie verwendet dann align-self: anchor-center, um das verankerte Element in der Blockrichtung auf dem Anker zu zentrieren.

Schließlich werden die linken und rechten Positionsoptionen mit einer schmaleren width versehen.

css
@position-try --custom-left {
  position-area: left;
  width: 100px;
  margin: 0 10px 0 0;
}

@position-try --custom-bottom {
  top: anchor(bottom);
  justify-self: anchor-center;
  margin: 10px 0 0 0;
  position-area: none;
}

@position-try --custom-right {
  left: calc(anchor(right) + 10px);
  align-self: anchor-center;
  width: 100px;
  position-area: none;
}

@position-try --custom-bottom-right {
  position-area: bottom right;
  margin: 10px 0 0 10px;
}

Das Infokästchen erhält eine feste Positionierung, eine position-anchor-Eigenschaft, die den anchor-name des Ankers referenziert, um die beiden zu verbinden, und ist an die Oberkante des Ankers mit einem position-area gebunden. Wir geben ihm auch eine feste width und einen unteren margin. Die benutzerdefinierten Positionsoptionen werden dann in der position-try-fallbacks-Eigenschaft referenziert, um zu verhindern, dass das positionierte Element überläuft oder aus dem Ansichtsbereich herausgescrollt wird, wenn sich der Anker der Kante des Ansichtsbereichs nähert.

css
.infobox {
  position: fixed;
  position-anchor: --myAnchor;
  position-area: top;
  width: 200px;
  margin: 0 0 10px 0;
  position-try-fallbacks:
    --custom-left, --custom-bottom,
    --custom-right, --custom-bottom-right;
}

Ergebnis

Blättern Sie auf der Seite und beachten Sie die Veränderung der Platzierung des positionierten Elements, wenn sich der Anker der verschiedenen Kanten des Ansichtsbereichs nähert. Dies liegt an den verschiedenen angewendeten Fallback-Positionsoptionen.

Lassen Sie uns durchgehen, wie diese Positionsoptionen funktionieren:

  • Zunächst beachten Sie, dass unsere Standardposition durch position-area: top definiert wird. Wenn das Infokästchen die Seite in keiner Richtung überläuft, befindet sich das Infokästchen über dem Anker, und die in der position-try-fallbacks-Eigenschaft festgelegten Positionierungsversuchs-Fallback-Optionen werden ignoriert. Beachten Sie auch, dass das Infokästchen eine feste Breite und einen unteren Rand festgelegt hat. Diese Werte ändern sich, wenn unterschiedliche Positionierungsversuchs-Fallback-Optionen angewendet werden.
  • Wenn das Infokästchen zu überlaufen beginnt, versucht der Browser zuerst die --custom-left Position. Dies verschiebt das Infokästchen nach links vom Anker mit position-area: left, passt den Rand entsprechend an und gibt dem Infokästchen auch eine andere Breite.
  • Der Browser versucht als nächstes die --custom-bottom Position. Dies verschiebt das Infokästchen nach unten vom Anker mit top und justify-self statt eines position-area und setzt einen entsprechenden Rand. Es wird kein width-Deskriptor einbezogen, sodass das Infokästchen auf seine Standardbreite von 200px zurückkehrt, die durch die width-Eigenschaft festgelegt ist.
  • Der Browser versucht als nächstes die --custom-right Position. Dies funktioniert ähnlich wie die --custom-left Position, mit demselben width-Deskriptor-Wert. Wir verwenden jedoch left und align-self, um das positionierte Element zu platzieren, anstatt eines position-area. Und wir umwickeln den left-Eigenwert in eine calc()-Funktion, in der wir 10px hinzufügen, um Abstand zu schaffen, anstatt margin zu verwenden.
  • Wenn keine der anderen Versuchs-Fallback-Optionen es schafft, das positionierte Element vom Überlaufen abzuhalten, versucht der Browser schließlich die --custom-bottom-right-Position als letzten Ausweg. Dies platziert das positionierte Element rechts unten vom Anker mit position-area: bottom right.

Wenn eine Positionsoption angewendet wird, überschreiben ihre Werte die initial auf das positionierte Element gesetzten Werte. Beispielsweise beträgt die initial auf das positionierte Element gesetzte width 200px, aber wenn die --custom-right Positionsoption angewendet wird, wird ihre Breite auf 100px gesetzt.

In einigen Fällen müssen wir innerhalb der benutzerdefinierten Positionsoptionen Werte festlegen, um die Anfangswerte auszuschalten. Die --custom-bottom und --custom-right Optionen verwenden Inset-Eigenschafts- und *-self: anchor-center-Werte, um das positionierte Element zu platzieren, daher entfernen wir in jedem Fall den zuvor eingestellten position-area-Wert, indem wir position-area: none setzen. Wenn wir dies nicht tun würden, würde der anfänglich gesetzte position-area: top-Wert noch wirksam bleiben und die anderen Positionierungsinformationen stören.

Spezifikationen

Specification
CSS Anchor Positioning
# at-ruledef-position-try

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch