DasCSS-Positionierungs-Layout-Modul definiert die koordinatenbasierte Positionierungs- und Offset-Schemata, die in CSS verfügbar sind, sowie die Eigenschaften, die zur Positionierung und Stapelung von Elementen auf einer Webseite verwendet werden. Das Modul ist bekannt für die Definition der grundlegenden Positionierungsmethoden, einschließlich relativer Positionierung, "sticky" Positionierung, absoluter Positionierung und fester Positionierung. Es definiert auch, wie positionierte Elemente gemalt und geschichtet werden, um das Stapelverhalten und die visuelle Reihenfolge zu klären.

Das Positionierungs-Layout-Modul definiert die physischen, logischen und Kurzschreibweise-Inset-Eigenschaften. Die logischen Eigenschaften ermöglichen die Entwicklung mit Internationalisierung und Reaktionsfähigkeit im Blick.

Wie alle CSS-Module beeinflusst und wird dieses Modul durch andere Module beeinflusst. Es beschreibt, wie die Positionierung mit anderen Layout-Modulen wie demCSS-Flexibler-Box-Layout und demCSS-Grid-Layout interagiert. Andere Module, wie dasCSS-Anker-Positionierungsmodul, bauen auf diesem Modul auf, um die Positionierung von Elementen relativ zu anderen Elementen und Schichten zu ermöglichen.

Referenz

Eigenschaften

• bottom
• inset
• inset-block
• inset-block-end
• inset-block-start
• inset-inline
• inset-inline-end
• inset-inline-start
• left
• overlay
• position
• right
• top

Selektoren

• ::backdrop

Glossarbegriffe und Definitionen

• Block-Richtung
• Umgebender Block
• Fluss-relative Werte
• Inline-Richtung
• Inset-Eigenschaften
• Positionierungskontext
• Relative Positionierung
• Stapelkontext
• Statische Positionierung
• Obere Schicht

Leitfäden

Verstehen von z-index

Behandelt den Begriff des Stapelkontexts und erklärt, wie die Z-Ordnung funktioniert, mit mehreren Beispielen.

Stapelung ohne diez-index Eigenschaft

Die Stapelregeln, die gelten, wennz-index nicht verwendet wird.

Stapelung schwebender Elemente

Wie schwebende Elemente in der Stapelung gehandhabt werden.

Verwendung vonz-index

Wiez-index verwendet wird, um die Standard-Stapelung zu ändern.

Stapelkontext

CSS-Stapelkontext, die CSS-Funktionen, die neue Stapelkontexte erstellen, und geschachtelte Stapelkontexte.

Lernen: Positionierung

Die verschiedenen Positionswerte und wie man sie verwendet.

Verwandte Konzepte

• float
• clear
• transition-property
• transition-behavior

• Popover-API

• <dialog>-Element

• CSS Anker-Positionierung Modul

  • position-anchor
  • position-area
  • position-try-fallbacks
  • position-try-order
  • position-try Kurzschreibweise
  • position-visibility

• CSS-Transformationen Modul

  • transform
  • transform-origin
  • translate

Spezifikationen

Siehe auch

• Andere CSS*-position Eigenschaften:
  • background-position
  • background-position
  • background-position
  • font-synthesis-position
  • font-variant-position
  • list-style-position
  • mask-position
  • object-position
  • offset-position
  • ruby-position
  • text-emphasis-position
  • text-underline-position
• PositionsbezogeneDatentypen
  • <baseline-position>
  • <content-position>
  • <overflow-position>
  • <self-position>
• CSS Scroll Snap Modul
  • Snap-Positionen