Lernen Sie das Positionslayout: von statisch über relativ, absolut und fest

Positionslayout verstehen: Von statisch bis relativ, absolut und fest sind spezifische Codebeispiele erforderlich

In der Webentwicklung ist das Layout ein sehr wichtiger Teil. Die Positionseigenschaft von CSS steuert das Layout von Elementen. In diesem Artikel werden die vier Arten des Positionslayouts vorgestellt: statisch, relativ, absolut und fest, und ihre Verwendung und Auswirkungen anhand spezifischer Codebeispiele erläutert.

1. Statische Positionierung (statisch):
   Statische Positionierung ist die Standardpositionierungsmethode für Elemente. Zu diesem Zeitpunkt werden Elemente entsprechend dem Fluss des Dokuments angeordnet und werden von anderen Positionierungsmethoden nicht beeinflusst. Statisch positionierte Elemente können nicht über Attribute wie oben, unten, links, rechts usw. positioniert werden, da diese keinen Einfluss auf das Element haben. Das Folgende ist ein Beispielcode für die statische Positionierung:

.container {
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
}

<div class="container">
  静态定位元素
</div>

2. Relative Positionierung (relativ):
   Die relative Positionierung ist relativ zur ursprünglichen Position des Elements im Dokumentenfluss. Durch Festlegen der Attribute „oben“, „unten“, „links“ und „rechts“ können Sie den Versatz des Elements relativ zu seiner ursprünglichen Position angeben. Die relative Positionierung wirkt sich nicht auf andere Elemente aus, sodass andere Elemente aufgrund der relativen Positionierung ihre Position nicht ändern. Das Folgende ist ein Beispielcode für die relative Positionierung:

.container {
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
}

.box {
  position: relative;
  top: 20px;
  left: 30px;
  background-color: #ff0000;
}

<div class="container">
  <div class="box">
    相对定位元素
  </div>
</div>

3. Absolute Positionierung (absolut):
   Die absolute Positionierung erfolgt relativ zum nächstgelegenen positionierten Vorgängerelement (der Wert des Positionsattributs ist nicht statisch). Wenn kein positioniertes Vorgängerelement vorhanden ist, wird ein absolut positioniertes Element relativ zur gesamten Seite positioniert. Durch Festlegen der Attribute „oben“, „unten“, „links“ und „rechts“ können Sie den Versatz des Elements relativ zum Referenzelement angeben. Die absolute Positionierung wirkt sich auf die Position anderer Elemente aus, und andere Elemente werden neu angeordnet, um sich an die Änderung des positionierten Elements anzupassen. Das Folgende ist ein Beispielcode für die absolute Positionierung:

.container {
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
  position: relative;
}

.box {
  position: absolute;
  top: 20px;
  left: 30px;
  background-color: #ff0000;
}

<div class="container">
  <div class="box">
    绝对定位元素
  </div>
</div>

4. Feste Positionierung (fest):
   Die feste Positionierung erfolgt relativ zum Browserfenster. Durch Festlegen der Attribute „oben“, „unten“, „links“ und „rechts“ können Sie den Versatz des Elements relativ zum Browserfenster angeben. Die feste Positionierung ändert ihre Position beim Scrollen der Seite nicht und kann daher zum Erstellen schwebender Elemente wie Navigationsleisten oder Anzeigen verwendet werden. Das Folgende ist ein Beispielcode für die feste Positionierung:

.container {
  width: 200px;
  height: 2000px;
  background-color: #f2f2f2;
}

.box {
  position: fixed;
  top: 20px;
  left: 30px;
  background-color: #ff0000;
}

<div class="container">
  <div class="box">
    固定定位元素
  </div>
</div>

Anhand der obigen Codebeispiele können wir die Unterschiede und die Verwendung der vier Positionslayouts klar verstehen. Die statische Positionierung ist die Standardeinstellung und die Elemente werden entsprechend dem Fluss des Dokuments angeordnet. Mit der relativen Positionierung können Sie durch Angabe eines Versatzes relativ zur ursprünglichen Position positionieren. Die absolute Positionierung wirkt sich auf die Position anderer Elemente aus und muss sich auf positionierte Vorgängerelemente beziehen. Die feste Positionierung kann relativ zum Browserfenster positioniert werden und zur Erstellung schwebender Elemente verwendet werden.

Die Beherrschung der verschiedenen Arten des Positionslayouts kann uns helfen, die Position und das Layout von Elementen besser zu kontrollieren und dadurch das Design und die Benutzererfahrung von Webseiten zu verbessern.

Das obige ist der detaillierte Inhalt vonLernen Sie das Positionslayout: von statisch über relativ, absolut und fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!