@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 At-Regel wird verwendet, um eine benutzerdefinierte Fallback-Option für Positionierungsversuche zu definieren, die zur Festlegung von Positionierung und Ausrichtung für Anker-Positionierte Elemente verwendet werden kann. Eine oder mehrere Sätze von Fallback-Optionen für Positionierungsversuche können auf das verankerte Element über die position-try-fallbacks-Eigenschaft oder die position-try-Kurzschreibweise angewendet werden. Wenn das positionierte Element in eine Position verschoben wird, bei der es beginnt, seinen enthaltenden Block oder das Ansichtsfenster zu überlaufen, wählt der Browser die erste Fallback-Option für Positionierungsversuche, die er findet, um das positionierte Element vollständig zurück auf den Bildschirm zu bringen.

Jede Positionsoption wird mit einem <dashed-ident> benannt und enthält eine Deskriptorliste, die Deklarationen spezifiziert, die Informationen wie Einfügeposition, Rand, Größe und Selbst-Ausrichtung definieren. Das <dashed-ident> wird verwendet, um die benutzerdefinierte Positionsoption in der position-try-fallbacks-Eigenschaft und der position-try-Kurzschreibweise zu referenzieren.

Für detaillierte Informationen zu Anker-Features und der Verwendung von Fallback-Optionen für Positionierungsversuche lesen Sie bitte die CSS Anker-Positionierung Modulstartseite und den Leitfaden für Fallback-Optionen und bedingtes Ausblenden bei Überlauf.

Syntax

css

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

Hinweis: Die --try-option-name ist ein <dashed-ident>, das einen identifizierenden Namen für die benutzerdefinierte Positionsoption spezifiziert, die dann verwendet werden kann, um diese Fallback-Option zur position-try-fallbacks-Liste 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 position-anchor-Eigenschaftswert an, der das Ankerelement definiert, an das das positionierte Element gebunden ist, indem ein <dashed-ident>-Wert angegeben wird, der dem anchor-name Eigenschaftswert des Ankerelements entspricht.

position-area

Gibt einen position-area-Eigenschaftswert an, der die Position des Anker-Positionierten Elements relativ zum Anker definiert.

Einfügen Eigenschaft Deskriptoren

Legen anchor()-Funktionswerte fest, die die Position der Kanten des Anker-Positionierten Elements relativ zur Kante des Ankerelements definieren. Einfügen-Eigenschaftsdeskriptoren können festgelegt werden, die die folgenden Eigenschaften darstellen:

Rand Eigenschaft Deskriptoren

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

Größendefinition Eigenschaftsdeskriptoren

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

Selbst-Ausrichtung Eigenschaftsdeskriptoren

Geben den anchor-center-Wert an, um das Anker-Positionierte Element relativ zur Mitte des Ankerelements in Block- oder Inline-Richtung auszurichten. align-self und justify-self Eigenschaftsdeskriptoren 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 dem Element festgelegt sind.

Formale Syntax

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

Beispiele

Verwendung einer benutzerdefinierten Positionsoption

In diesem Beispiel definieren wir ein Ankerelement und ein Anker-Positioniertes Element und erstellen dann vier benannte benutzerdefinierte Fallback-Optionen für Positionierungsversuche. Diese Optionen werden auf das positionierte Element angewendet, um sicherzustellen, dass seine Inhalte immer sichtbar sind, egal wo sich das Ankerelement im Ansichtsfenster befindet.

HTML

Wir fügen zwei <div>-Elemente hinzu, die zum Anker und zum Anker-Positionierten Element werden:

html

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

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

CSS

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

css

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

Dem Anker wird ein anchor-name gegeben und ein position-Wert von absolute darauf gesetzt. Wir positionieren es dann irgendwo in der Nähe der Mitte der anfänglichen <body>-Darstellung unter Verwendung von top und left-Werten:

css

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

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

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 platziert das positionierte Element in einer bestimmten Position um das Ankerelement und gibt ihm einen entsprechenden Rand von 10px zwischen dem positionierten Element und seinem Anker. Die Positionierung wird auf verschiedene Arten gehandhabt, um die verfügbaren unterschiedlichen Techniken zu demonstrieren:

Die erste und letzte Positionsoptionen verwenden eine position-area.
Die zweite Positionsoption verwendet top mit einem anchor()-Wert und justify-self: anchor-center, um das positionierte Element inline auf dem Anker zu zentrieren.
Die dritte Positionsoption verwendet left mit einem anchor()-Wert, eingebettet in eine calc()-Funktion, die 10px Abstand hinzufügt (anstatt den Abstand mit margin wie die anderen Optionen zu erzeugen). Sie verwendet dann align-self: anchor-center, um das positionierte Element in Block-Richtung auf dem Anker zu zentrieren.

Schließlich werden die linken und rechten Positionsoptionen mit einer schmäleren width versehen.

css

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

@position-try --custom-bottom {
  top: anchor(bottom);
  justify-self: anchor-center;
  margin-top: 10px;
  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;
}

Die Infobox erhält eine feste Positionierung, eine position-anchor-Eigenschaft, die den Anker des anchor-name referenziert, um die beiden miteinander zu verknüpfen, und ist an der oberen Kante des Ankers mit einer position-area verankert. Wir geben ihr auch eine feste width und etwas 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 Blickfeld gescrollt wird, wenn sich der Anker in der Nähe des Randes des Ansichtsfensters befindet.

css

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

Ergebnis

Scrollen Sie die Seite und beachten Sie die Änderung der Platzierung des positionierten Elements, während sich der Anker den verschiedenen Rändern des Ansichtsfensters nähert. Dies liegt daran, dass unterschiedliche Fallback-Positionierungsoptionen angewendet werden.

Lassen Sie uns darüber sprechen, wie diese Positionsoptionen funktionieren:

Zuerst beachten Sie, dass unsere Standardposition durch position-area: top definiert ist. Wenn die Infobox nicht in irgendeine Richtung über die Seite herausragt, sitzt die Infobox über dem Anker, und die in der position-try-fallbacks-Eigenschaft festgelegten Fallback-Positionierungsoptionen werden ignoriert. Beachten Sie auch, dass die Infobox eine feste Breite und einen unteren Rand hat. Diese Werte ändern sich, wenn verschiedene Fallback-Optionen für Positionierungsversuche angewendet werden.
Wenn die Infobox zu überlaufen beginnt, versucht der Browser zuerst die --custom-left Position. Diese bewegt die Infobox links vom Anker mit position-area: left, passt den Rand entsprechend an und gibt der Infobox auch eine andere Breite.
Als nächstes versucht der Browser die --custom-bottom Position. Diese bewegt die Infobox unten am Anker unter Verwendung von top und justify-self anstelle von position-area und setzt einen entsprechenden Rand. Es gibt keinen width-Deskriptor, sodass die Infobox zu ihrer Standardbreite von 200px zurückkehrt, die durch die width-Eigenschaft festgelegt wird.
Der Browser versucht als nächstes die --custom-right Position. Dies funktioniert ähnlich wie die --custom-left Position, mit demselben width-Deskriptorwert. Wir verwenden jedoch left und align-self, um das positionierte Element zu platzieren, anstatt einer position-area. Und wir umschließen den left-Wert in einer calc()-Funktion, in der wir 10px hinzufügen, um den Abstand zu erzeugen, anstatt margin zu verwenden.
Wenn keine der anderen Fallback-Optionen erfolgreich das Überlaufen des positionierten Elements verhindert, versucht der Browser die --custom-bottom-right Position als letzten Ausweg. Diese platziert das positionierte Element unten rechts am Anker unter Verwendung von position-area: bottom right.

Wenn eine Positionsoption angewendet wird, überschreiben ihre Werte die anfänglich auf dem positionierten Element festgelegten Werte. Beispielsweise ist die width, die auf dem positionierten Element zunächst festgelegt wurde, 200px, aber wenn die --custom-right-Positionsoption angewendet wird, wird ihre Breite auf 100px gesetzt.

In einigen Fällen müssen wir Werte innerhalb der benutzerdefinierten Positionsoptionen festlegen, um die anfänglichen Werte zu deaktivieren. Die --custom-bottom und --custom-right Optionen verwenden Einfüge-Eigenschaften und *-self: anchor-center Werte, um das positionierte Element zu platzieren, daher entfernen wir den zuvor festgelegten position-area Wert in jedem Fall durch Setzen von position-area: none. Wenn wir dies nicht tun würden, würde der anfänglich gesetzte Wert position-area: top weiterhin wirksam sein und die andere Positionierungsinformationen beeinträchtigen.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

position-area
position-anchor
position-try-fallbacks
position-try
Die anchor()-Funktion
Die anchor-size()-Funktion
CSS Anker-Positionierung Modul
Verwendung der CSS Anker-Positionierung Leitfaden
Fallback-Optionen und bedingtes Ausblenden bei Überlauf Leitfaden
CSSPositionTryRule

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden