CSS Positioniertes Layout

Das CSS positioniertes Layout-Modul definiert die auf Koordinaten basierenden Positionierungs- und Versatzschemata, die in CSS verfügbar sind, sowie die Eigenschaften, die verwendet werden, um Elemente auf einer Webseite zu positionieren und zu stapeln. Das Modul ist am bekanntesten für die Definition der grundlegenden Positionierungsmethoden, einschließlich relativer Positionierung, sticky Positionierung, absoluter Positionierung und fester Positionierung. Es definiert auch, wie positionierte Elemente dargestellt und geschichtet werden, und klärt das Stapelverhalten und die visuelle Reihenfolge.

Das Positioniertes-Layou-Modul definiert die physischen, logischen und Kurzformen der Einsetz-Eigenschaften. Die logischen Eigenschaften ermöglichen die Entwicklung unter Berücksichtigung von Internationalisierung und Responsivität.

Wie alle CSS-Module wirkt dieses Modul auf andere Module und wird von ihnen beeinflusst. Dieses Modul beschreibt, wie die Positionierung mit anderen Layoutmodulen wie dem CSS-Flexbox-Layout und dem CSS-Grid-Layout interagiert. Andere Module, wie das CSS-Anker-Positionierung, 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

• Blockrichtung
• Containing Block
• Fluss-relative Werte
• Inline-Richtung
• Einsetz-Eigenschaften
• Positionierungskontext
• Relative Positionierung
• Stapelkontext
• Statische Positionierung
• Top-Schicht

Leitfäden

Verständnis von z-index

Präsentiert das Konzept des Stapelkontexts und erklärt, wie das Z-Ordnen funktioniert, mit mehreren Beispielen.

Stapel ohne die z-index-Eigenschaft

Die Stapelregeln, die gelten, wenn z-index nicht verwendet wird.

Schwebende Elemente stapeln

Wie schwebende Elemente mit Stapeln gehandhabt werden.

Verwendung von z-index

Wie man z-index verwendet, um die Standardstapelung zu ändern.

Stapelkontext

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

Lernen: Positionierung

Die verschiedenen Positionswerte und deren Verwendung.

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 Kurzform
  • position-visibility

• CSS Transformieren 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
• Positionsbezogene Datentypen
  • <baseline-position>
  • <content-position>
  • <overflow-position>
  • <self-position>
• CSS Scroll Snap Modul
  • Einrastpositionen