Ausführliche Erläuterung der relativen CSS-Positionierungseigenschaften: Position und Relative-CSS-Tutorial-php.cn

Ausführliche Erläuterung der relativen CSS-Positionierungseigenschaften: Position und Relative

WBOY

Freigeben： 2023-10-24 08:39:15

Original

1036 Leute haben es durchsucht

CSS 相对定位属性详解：position 和 relative

Detaillierte Erklärung der relativen CSS-Positionierungseigenschaften: Position und relative

Einführung:
In CSS müssen wir Elemente häufig so positionieren, dass sie an einer bestimmten Stelle auf der Seite angezeigt werden. Die relativen Positionierungsattribute position und relative sind ein häufig verwendetes Attributpaar. In diesem Artikel werden die Verwendung und Auswirkungen dieser beiden Eigenschaften ausführlich vorgestellt und spezifische Codebeispiele bereitgestellt.

1. Positionsattribut:
Das Positionsattribut wird hauptsächlich zum Festlegen der Positionierungsmethode von Elementen auf Blockebene verwendet. Es verfügt über die folgenden optionalen Werte:

statisch: Standardwert, Elemente werden entsprechend dem normalen Fluss angeordnet.
relativ: Das Element wird relativ zu seiner ursprünglichen Position positioniert.
absolut: Das Element wird vom normalen Dokumentfluss getrennt und relativ zu seinem enthaltenden Block positioniert.
behoben: Das Element wird vom normalen Dokumentenfluss getrennt und relativ zum Browserfenster positioniert.
sticky: Das Element zeigt beim Scrollen eine relative Positionierung an, andernfalls eine statische Positionierung.

2. Relatives Attribut:
Das relative Attribut kann zusammen mit dem Positionsattribut verwendet werden, mit dem das Element relativ zu sich selbst positioniert wird. Die relative Positionierung erfolgt normalerweise relativ zur Position des Elements im normalen Dokumentfluss. Sie können die Position jedoch auch feinabstimmen, indem Sie die Eigenschaften oben, unten, links und rechts festlegen.

Spezifisches Codebeispiel:
Das Folgende ist eine einfache HTML-Seite, die ein Element mit relativer Positionierung enthält:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 400px;
  height: 400px;
  background-color: #F2F2F2;
  position: relative;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #FF0000;
  position: relative;
  top: 50px;
  left: 50px;
}
</style>
</head>
<body>
<div class="container">
  <div class="box"></div>
</div>
</body>
</html>

Nach dem Login kopieren

Im obigen Code haben wir ein Container-Div mit einer Breite und Höhe von 400 Pixel erstellt und die Hintergrundfarbe festgelegt #F2F2F2, setzen Sie seine Positionseigenschaft auf relativ, um eine relative Positionierung zu erreichen. Dann habe ich innerhalb des Containers ein kleines quadratisches Feld mit einer Breite und Höhe von 100 Pixeln und einer Hintergrundfarbe von #FF0000 erstellt. Außerdem habe ich das Positionsattribut auf „relativ“ gesetzt und es um 50 Pixel nach unten und nach rechts verschoben, indem ich die Attribute „oben“ und „links“ festgelegt habe bzw. 50px.

Wenn wir den obigen Code ausführen, können wir sehen, dass auf der Seite ein relativ positioniertes rotes Quadrat angezeigt wird und seine Position relativ zum Container angepasst wird.

Fazit:
Durch die Verwendung der relativen Positionierungsattribute position und relative können wir Elemente einfach positionieren. In diesem Artikel werden die Konzepte dieser beiden Eigenschaften detailliert beschrieben und spezifische Codebeispiele bereitgestellt. Ich hoffe, dass die Leser durch die Einleitung dieses Artikels die Verwendung und Wirkung dieser beiden Attribute besser verstehen und beherrschen können.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der relativen CSS-Positionierungseigenschaften: Position und Relative. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!