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-name
position-anchor
position-area
position-try-fallbacks
position-try-order
position-try
Kurzformposition-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
anchor
Nicht standardisiert
Schnittstellen
CSSPositionTryDescriptors
CSSPositionTryRule
HTMLElement.anchorElement
Nicht 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-start
inset-block-end
inset-inline-start
inset-inline-end
inset-block
inset-inline
inset
Kurzforminline-size
min-block-size
min-inline-size
block-size
max-block-size
max-inline-size
margin-block
margin-block-end
margin-block-start
margin-inline
margin-inline-end
margin-inline-start
- Einfügeeigenschaften Glossar Eintrag
- CSS-positioniertes Layout Modul:
- CSS-Box-Modell Modul:
- CSS-Box-Ausrichtung Modul:
Spezifikationen
Specification |
---|
CSS Anchor Positioning |