Detaillierte Erklärung der Unterschiede zwischen den vier Positionierungsarten in CSS

Wir alle wissen, dass die in der Front-End-Entwicklung häufig verwendeten Positionierungsmethoden in CSS

Es gibt vier Arten der Positionierung: normale Positionierung, relative Positionierung, absolute Positionierung und feste Positionierung.

Viele Front-End-Neulinge ohne Grundkenntnisse kennen jedoch die Funktionen und Unterschiede dieser vier Positionierungsmethoden nicht und sind bei ihrer Verwendung sehr unflexibel. Sie müssen wissen, dass diese vier Positionierungsmethoden das Wesentliche sind, wenn Sie beim Layout von Webseiten gute Arbeit leisten möchten. Wenn Sie Positionierung und Layout gut lernen, wird die Front-End-Entwicklung einfach!

Deshalb erklären wir heute die Funktionen und Unterschiede dieser vier Positionierungsarten in CSS! Helfen Sie allen, die wunderbaren Einsatzmöglichkeiten dieser 4 Layouts zu verstehen!

1. Statische Positionierung

In unserem Entwicklungsprozess werden alle Boxen im gemeinsamen Fluss positioniert, sofern nicht anders angegeben. Die Position der Box eines Elements im normalen Fluss wird durch die Position des Elements im (X)HTML bestimmt. Elemente auf Blockebene werden von oben nach unten angeordnet und der vertikale Abstand zwischen den Boxen wird anhand des vertikalen Rands der Box berechnet. Inline-Elemente werden horizontal in einer Reihe angeordnet. Ich werde das nicht im Detail beschreiben.

2. Relative Positionierung

In unserer Front-End-Entwicklung wurde die relative Positionierung immer als Teil des normalen Dokumentflusspositionierungsmodells betrachtet, und die Position des positionierten Elements bewegt sich relativ zu seiner Position im normalen Fluss. Ein Element mit relativer Positionierung behält seine ursprüngliche Position bei, unabhängig davon, ob es verschoben wird. Wenn Sie ein Element verschieben, werden andere Felder davon verdeckt.

Ergebnis

3. Absolute Positionierung

In der Front-End-Entwicklung relativ zum nächstgelegenen übergeordneten Element. Wenn es kein nächstgelegenes übergeordnetes Element gibt, ist seine Position relativ zum anfänglichen umschließenden Block (z. B. Body). Eine absolut positionierte Box kann von ihrem enthaltenden Block nach oben, rechts, unten oder links verschoben werden.

Ergebnis

4. Feste Positionierung

Die restlichen Eigenschaften sind, bezogen auf das Browserfenster, mit der absoluten Positionierung identisch. Ein festes Element ist ein Element, das an einer bestimmten Position im Browser fixiert ist. Ein absolut positioniertes Element ist an der Seite fixiert. Wenn Sie die Bildlaufleiste scrollen, wird das absolut positionierte Element auch nach oben gescrollt, ein festes Element hingegen nicht.

endlich

Diese Positionierungsmethoden haben ihre eigenen Vorteile. Viele Neulinge fragen Lao Li oft: Welche dieser vier Layoutmethoden sollten wir beim Schreiben einer Seite verwenden? (Diese Frage klingt sehr einfach)

Abschließend möchte ich Ihnen sagen, dass in unserer aktuellen professionellen Front-End-Entwicklungsarbeit weder die absolute noch die relative Positionierung am häufigsten verwendet wird, sondern die Kombination aus absoluter und relativer Positionierung. (Xiaobai: WTF???? Fusion???)

Es ist nicht so, dass durch die Kombination eine neue Positionierungsmethode entstehen würde. Stattdessen gehen wir in der Frontend-Entwicklung zu einer Layout-Schreibvorgabe über:

Absolutes Eltern-Kind-Element (d. h. das übergeordnete Element verwendet die relative Positionierung und das untergeordnete Element die absolute Positionierung, und sie werden kombiniert, um das Layout zu erreichen.)

Diese Layout-Vorgabe ist eine anerkannte Layout-Methode für die Frontend-Entwicklung in dieser Phase und kann zudem viele Fehler vermeiden.

Dies ist das Ende dieses Artikels mit der detaillierten Erklärung der vier Positionierungsarten in CSS. Weitere Informationen zu den Unterschieden zwischen den vier CSS-Positionierungsarten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!