Was ist der Unterschied zwischen „Position: relativ' und „Position: absolut' in CSS?

Die Unterschiede zwischen Position: Relativ und Absolut in CSS verstehen

Einführung

In CSS Die Positionierung von Elementen ist entscheidend für die Erstellung optisch ansprechender Layouts. Unter den verschiedenen Positionierungsoptionen spielen „position:relative“ und „position:absolute“ eine wichtige Rolle, die jeweils einem bestimmten Zweck dienen. Dieser Artikel befasst sich mit den Unterschieden zwischen diesen beiden Eigenschaften, untersucht ihre Eigenschaften und wann es angemessen ist, sie zu verwenden.

Absolute Positionierung

Position: absolut; Entfernt ein Element aus dem normalen Fluss des Dokuments und platziert es an einer genauen Position auf der Seite. Diese Positionierung basiert auf dem Browser-Ansichtsfenster. Mithilfe der Eigenschaften „oben“, „rechts“, „unten“ und „links“ können Sie den Versatz des Elements von den Kanten des Ansichtsfensters angeben. Die absolute Positionierung ist ideal, wenn Sie möchten, dass Elemente unabhängig vom umgebenden Inhalt genau an ihrer Position auf der Seite fixiert werden.

Relative Positionierung

Position: relativ; nutzt außerdem die gleichen Positionierungseigenschaften wie die absolute Positionierung. Anstatt jedoch auf das Ansichtsfenster zu verweisen, berechnet es die Position des Elements relativ zu seiner ursprünglichen Position innerhalb des normalen Flusses. Durch diese Positionierung können Elemente von ihrer Standardposition verschoben werden, während der Fluss des umgebenden Inhalts dennoch berücksichtigt wird.

Hauptunterschiede

• Bezugspunkt: Bei der absoluten Positionierung wird das Ansichtsfenster als Referenzpunkt verwendet, während bei der relativen Positionierung die ursprüngliche Position des Elements im verwendet wird Fluss.
• Auswirkung auf den Fluss: Durch die absolute Positionierung wird das Element aus dem Fluss entfernt, sodass es andere überlappen kann. Umgekehrt hält die relative Positionierung das Element im Fluss und sein Versatz wird relativ zu seiner normalen Position berechnet.
• Standardbreite: Absolut positionierte Elemente haben eine Standardbreite des darin enthaltenen Inhalts. während relativ positionierte Elemente standardmäßig 100 % des verfügbaren Platzes ausfüllen.

Wann man sie jeweils verwendet Eigenschaft

• Absolute Positionierung: Verwenden Sie diese Option, wenn Sie möchten, dass Elemente an bestimmten Stellen auf der Seite fixiert werden, z. B. Navigationsmenüs, Schaltflächen für soziale Medien oder Popups .
• Relative Positionierung: Verwenden Sie diese Option, wenn Sie Elemente leicht von ihrer normalen Position versetzen möchten, z. B. beim Einschieben oder Verschieben von Elementen Bilder oder das Erstellen von Dropdown-Menüs.

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen „Position: relativ' und „Position: absolut' in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!