CSS-Ankerpositionierung
Das CSS-Ankerpositionierungsmodul definiert Funktionen, die es ermöglichen, Elemente miteinander zu verbinden. Bestimmte Elemente werden als Ankerelemente definiert; ankerpositionierte Elemente können dann basierend auf der Größe und Position der Ankerelemente, an die sie gebunden sind, in ihrer Größe und Position festgelegt werden.
Darüber hinaus bietet die Spezifikation CSS-exklusive Mechanismen, um:
- Eine Reihe von alternativen Positionen für ein Ankerelement anzugeben; wenn die Standard-Renderposition dazu führt, dass es seinen enthaltenden Block überläuft und/oder außerhalb des Bildschirms angezeigt wird, versucht der Browser, das Ankerelement stattdessen in den alternativen Positionen darzustellen.
- Bedingungen zu deklarieren, unter denen ankerpositionierte Elemente ausgeblendet werden sollten, in Situationen, in denen es nicht angebracht ist, sie mit Ankerelementen zu verbinden.
Referenz
Eigenschaften
anchor-nameposition-anchorposition-areaposition-try-fallbacksposition-try-orderposition-tryKurzformposition-visibility
Das CSS-Ankerpositionierungsmodul führt auch die Eigenschaft anchor-scope ein. Derzeit unterstützt kein Browser diese Funktion.
At-rules und Deskriptoren
Funktionen
Datentypen und Werte
HTML-Attribute
anchorNicht standardisiert
Schnittstellen
CSSPositionTryDescriptorsCSSPositionTryRuleHTMLElement.anchorElementNicht standardisiert
Leitfäden
- Verwendung von CSS-Ankerpositionierung
-
Ein einführender Leitfaden zu grundlegenden Konzepten der Ankerpositionierung, einschließlich der Zuordnung, Positionierung und Größenanpassung von Elementen relativ zu ihrem Anker.
- Fallback-Optionen und bedingtes Ausblenden bei Überlauf
-
Ein Leitfaden zu den Mechanismen, die die CSS-Ankerpositionierung bietet, um zu verhindern, dass ankerpositionierte Elemente ihre beinhaltenden Elemente oder den Viewport überlaufen, einschließlich Position-Try-Fallback-Optionen und bedingtem Ausblenden von Elementen.
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 Glossar-Begriff
- CSS Positioniertes Layout Modul:
- CSS Box-Modell Modul:
- CSS Box-Ausrichtung Modul:
Spezifikationen
| Specification |
|---|
| CSS Anchor Positioning |