CSS-Verankerungspositionierung
Das CSS-Verankerungspositionierungsmodul definiert Funktionen, die es ermöglichen, Elemente miteinander zu verbinden. Bestimmte Elemente werden als Verankerungselemente definiert; verankerungspositionierte Elemente können dann in ihrer Größe und Position basierend auf der Größe und der Position der Verankerungselemente, an die sie gebunden sind, gesetzt werden.
Darüber hinaus bietet die Spezifikation reine CSS-Mechanismen um:
- Eine Reihe von alternativen Positionen für ein verankertes Element anzugeben; wenn die Standard-Rendering-Position dazu führt, dass es über seinen enthaltenden Block hinaus und/oder außerhalb des Bildschirms gerendert wird, versucht der Browser, das verankerte Element stattdessen in den alternativen Positionen zu rendern.
- Bedingungen zu deklarieren, unter denen verankerungspositionierte Elemente ausgeblendet werden sollten, in Situationen, in denen es nicht angebracht ist, sie an Verankerungselemente zu binden.
Referenz
>Eigenschaften
At-Regeln und Deskriptoren
Funktionen
Datentypen und Werte
HTML-Attribute
anchorNicht standardisiert
Schnittstellen
CSSPositionTryDescriptorsCSSPositionTryRuleHTMLElement.anchorElementNicht standardisiert
Leitfäden
- Verwendung der CSS-Verankerungspositionierung
-
Ein Einführungsguide zu grundlegenden Konzepten der Verankerungspositionierung, einschließlich der Zuordnung, Positionierung und Größenanpassung von Elementen relativ zu ihrer Verankerung.
- Fallback-Optionen und bedingtes Ausblenden bei Überlauf
-
Ein Leitfaden zu den Mechanismen, die die CSS-Verankerungspositionierung bietet, um zu verhindern, dass verankerungspositionierte Elemente ihren enthaltenden Elementen oder dem Viewport überlaufen, einschließlich der Fälle, in denen die Möglichkeit besteht, Positionen zu versuchen und Elemente bei Bedarf auszublenden.
- Verwendung verankerter Container-Abfragen
-
Erklärt, wie man verankerte Container-Abfragen verwendet, um bedingt Stile auf verankerungspositionierte Elemente anzuwenden, abhängig davon, welche Positionsversuche für sie aktiv sind.
Verwandte Konzepte
- CSS-logische Eigenschaften und Werte Modul:
inset-block-startinset-block-endinset-inline-startinset-inline-endinset-blockinset-inlineinsetKurzforminline-sizemin-block-sizemin-inline-sizeblock-sizemax-block-sizemax-inline-sizemargin-blockmargin-block-endmargin-block-startmargin-inlinemargin-inline-endmargin-inline-start- Inset-Eigenschaften Glossarbegriff
- CSS-positioniertes Layout Modul:
- CSS-Box-Modell Modul:
- CSS-Box-Ausrichtung Modul:
Spezifikationen
| Spezifikation |
|---|
| CSS Anchor Positioning Module Level 1> |
| CSS Anchor Positioning Module Level 2> |