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 ankeriertes Element anzugeben; wenn die Standardpositionierung dazu führt, dass es aus dem umgebenden Block hinausragt und/oder außerhalb des Bildschirms angezeigt wird, versucht der Browser, das ankerierte Element stattdessen in den alternativen Positionen darzustellen.
• Bedingungen festzulegen, unter denen ankerpositionierte Elemente ausgeblendet werden sollten, in Situationen, in denen es nicht angemessen ist, sie an Ankerelemente zu binden.

Referenz

Eigenschaften

• anchor-name
• position-anchor
• position-area
• position-try-fallbacks
• position-try-order
• position-try Kurzform
• position-visibility

Das CSS-Ankerpositionierungsmodul führt auch die Eigenschaft anchor-scope ein. Derzeit wird dieses Feature von keinem Browser unterstützt.

@-Regeln und Deskriptoren

• @position-try

Funktionen

• anchor()
• anchor-size()

Datentypen und Werte

• anchor-center
• <anchor-side>
• <anchor-size>
• <position-area>
• <try-size>
• <try-tactic>

HTML-Attribute

• anchor Nicht standardisiert

Schnittstellen

• CSSPositionTryDescriptors
• CSSPositionTryRule
• HTMLElement.anchorElement Nicht standardisiert

Leitfäden

Anwendung der CSS-Ankerpositionierung

Ein einführender Leitfaden zu grundlegenden Konzepten der Ankerpositionierung, einschließlich der Verknüpfung, Positionierung und Größenanpassung von Elementen in Bezug auf ihren 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 umgebenden 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-start
  • inset-block-end
  • inset-inline-start
  • inset-inline-end
  • inset-block
  • inset-inline
  • inset Kurzform
  • inline-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
  • Inset-Eigenschaften Glossarbegriff
• CSS-positioniertes Layout Modul:
  • top
  • left
  • bottom
  • right
• CSS-Boxmodell Modul:
  • width
  • height
  • min-width
  • min-height
  • max-width
  • max-height
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
• CSS-Kasten-Ausrichtung Modul:
  • align-items
  • align-self
  • justify-items
  • justify-self
  • place-items
  • place-self

Spezifikationen

Siehe auch

• CSS-Scroll-Anker Modul
• Lernen: CSS-Positionierung
• CSS-logische Eigenschaften und Werte Modul
• Lernen: Größenanpassung von Elementen in CSS