CSS-Ankerpositionierung
Das CSS-Ankerpositionierungsmodul definiert Features, die es ermöglichen, Elemente miteinander zu verbinden. Bestimmte Elemente werden als Ankerelemente definiert; Ankerpositionierte Elemente können dann in ihrer Größe und Position basierend auf der Größe und dem Standort der Ankerelemente, an die sie gebunden sind, eingestellt werden.
Darüber hinaus bietet die Spezifikation CSS-exklusive Mechanismen, um:
- Eine Reihe von alternativen Positionen für ein verankertes Element anzugeben; wenn die Standard-Renderposition dazu führt, dass es über seinen enthaltenden Block hinausläuft und/oder außerhalb des Bildschirms dargestellt 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 an Ankerelemente zu binden.
Referenz
>Eigenschaften
anchor-nameposition-anchorposition-areaposition-try-fallbacksposition-try-orderposition-tryKurzformposition-visibility
Das CSS-Ankerpositionierungsmodul führt auch die Eigenschaft anchor-scope ein. Derzeit wird dieses Feature von keinem Browser unterstützt.
At-Regeln und Deskriptoren
Funktionen
Datentypen und Werte
HTML-Attribute
anchorNicht standardisiert
Schnittstellen
CSSPositionTryDescriptorsCSSPositionTryRuleHTMLElement.anchorElementNicht standardisiert
Leitfäden
- Verwendung der CSS-Ankerpositionierung
-
Ein einführender Leitfaden zu grundlegenden Ankerpositionierungskonzepten, einschließlich Verknüpfen, Positionieren und Größenanpassen von Elementen in Bezug auf ihre Anker.
- Fallback-Optionen und bedingtes Ausblenden bei Überlauf
-
Ein Leitfaden zu den Mechanismen, die die CSS-Ankerpositionierung bietet, um zu verhindern, dass Ankerpositionierte Elemente über ihre enthaltenen Elemente oder das Ansichtsfenster hinauslaufen, einschließlich Positions-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- Einfügeeigenschaften Glossar Eintrag
- CSS-positioniertes Layout Modul:
- CSS-Box-Modell Modul:
- CSS-Box-Ausrichtung Modul:
Spezifikationen
| Specification |
|---|
| CSS Anchor Positioning> |