CSS-Anchor-Positionierung

Das CSS-Anchor-Positionierungs-Modul definiert Funktionen, die es ermöglichen, Elemente miteinander zu verknüpfen. Bestimmte Elemente werden als Anchor-Elemente definiert; anchor-positionierte Elemente können dann ihre Größe und Position basierend auf der Größe und dem Standort der Anchor-Elemente, an die sie gebunden sind, einstellen.

Zusätzlich bietet die Spezifikation CSS-Mechanismen, um:

Eine Menge alternativer Positionen für ein verankertes Element festzulegen; wenn die Standard-Rendering-Position dazu führt, dass es seinen enthaltenden Block überläuft und/oder außerhalb des Bildschirms gerendert wird, versucht der Browser stattdessen, das verankerte Element in den alternativen Positionen zu rendern.
Bedingungen zu deklarieren, unter denen anchor-positionierte Elemente ausgeblendet werden sollten, in Situationen, in denen es nicht angemessen ist, sie an Anchor-Elemente zu binden.

Referenzen

Eigenschaften

Hinweis: Das CSS-Anchor-Positionierungsmodul führt die Eigenschaft anchor-scope ein, die noch nicht implementiert wurde.

At-Regeln und Deskriptoren

@position-try

Funktionen

Datentypen und Werte

HTML-Attribute

anchor Nicht standardisiert

Schnittstellen

CSSPositionTryDescriptors
CSSPositionTryRule
HTMLElement.anchorElement Nicht standardisiert

Leitfäden

Verwendung der CSS-Anchor-Positionierung: Ein Einführung in die grundlegenden Konzepte der Anchor-Positionierung, einschließlich der Verknüpfung, Positionierung und Größenanpassung von Elementen relativ zu ihrem Anchor.
Falleskaptionen und bedingtes Ausblenden bei Überlauf: Ein Leitfaden zu den Mechanismen, die die CSS-Anchor-Positionierung bietet, um zu verhindern, dass verankerte Elemente ihre enthaltenen Elemente oder den Ansichtsbereich überlaufen, einschließlich Position Try Fallback-Optionen und bedingtes Ausblenden von Elementen.

Spezifikationen

Specification
CSS Anchor Positioning