CSS-Positionierungslayout (Position, Positionierungslayoutfähigkeiten)

1. Was ist Positionierung?

Das Positionsattribut in CSS hat vier Werte: absolut/relativ/fest/statisch (absolut/relativ/fest/statisch (Standard)). Über das Positionierungsattribut können Sie einige unregelmäßige Layouts festlegen und TLBR (oben, links, unten, rechts) verwenden, um die Elementposition anzupassen.

2. Beschreibung jedes Attributwertes:

static (static) hat keine speziellen Einstellungen, folgt grundlegenden Positionierungsregeln, kann nicht über den Z-Index hierarchisiert werden und hat Standardattribute für jedes Element im normalen Fluss. Relative Objekte können nicht gestapelt oder vom Dokumentfluss getrennt werden und werden in Bezug auf ihre eigene statische Position mithilfe der Optionen oben, unten, links oder rechts positioniert. Absolut (absolute Positionierung) erfolgt außerhalb des Dokumentflusses und erfolgt nach oben, unten, links und rechts. Wählen Sie das nächstgelegene übergeordnete Objekt mit den meisten Positionierungseinstellungen für die absolute Positionierung aus. Wenn für das übergeordnete Objekt kein Positionierungsattribut festgelegt ist, wird das absolute Element am Ursprung der Körperkoordinaten positioniert. fest (feste Positionierung) Das feste Referenzobjekt ist hier das sichtbare Fenster und nicht der Hauptteil oder das übergeordnete Element. Elemente, die „fixiert“ verwenden, scrollen nicht, wenn das Fenster scrollt. Gehört zur Teilmenge des Absoluten.

3. Die spezifische Rolle jedes Attributwerts:

A.static: (statisch, Standardeigenschaft) wird normalerweise nicht verwendet, aber es gibt einige Szenarien, in denen Sie den Wert der Position von anderen Werten auf den Standard ändern möchten.

B.relative: (Relative Positionierung) Ein Element wird mit position:relative gesetzt. Da es den Textfluss nicht verlässt, wird seine Position nicht geändert und das aktuelle Layout wird nicht beeinflusst, wenn TLBR (oben, links, unten, rechts) nicht gesetzt ist. Das ist gleichbedeutend damit, dass nichts passiert. Wenn TLBR gesetzt ist, kann das Element in die angegebene Richtung verschoben werden, seine ursprüngliche Position bleibt jedoch erhalten. Ein Beispiel ist in der Abbildung dargestellt:

Abbildung 1: Einstellungsposition: relativ für Kind-1

Abbildung 2: Position von Child-1 anpassen oben: 20px links: 20px

C.absolute: (absolute Positionierung), vollständig außerhalb des Textflusses (normaler Fluss), die ursprüngliche Position wird nicht mehr eingenommen und TLBR kann so eingestellt werden, dass es sich beliebig bewegt;

Als besonderer Hinweis: Wenn für ein Element „absolut“ festgelegt ist und für das übergeordnete Element keine Position festgelegt ist (absolut/relativ/fest), wird der Hauptteil das übergeordnete Element sein.

Abbildung 1:

Abbildung 2:

Abbildung 3:

D.fixed : (feste Positionierung), scrollt nicht mit der Seite. Hier werden keine Bilder gepostet. Das anschaulichste Beispiel sind diese kleinen Web-Anzeigen. Sie scrollen die Seite, aber sie sind immer auf der rechten oder linken Seite der Webseite und folgen Ihnen.

4. Positionierungslayoutfähigkeiten: position: relative und position: absolute werden zusammen verwendet:

Wenn, wie oben erwähnt, für ein Element „absolut“ festgelegt ist und für keines seiner übergeordneten Elemente die Position „relativ“ festgelegt ist, wird der Hauptteil das übergeordnete Element sein. In diesem Fall wird es für uns schwierig sein, das Element an unserer Zielposition zu lokalisieren, und das Messen der Pixel wird mühsam. Bildbeschreibung:

Abbildung 1: Ausgangszustand

Abbildung 2: Position festlegen: absolut für box-chd-chd und oben festlegen: 0, links: 0. Sie können sehen, dass die obere linke Ecke als Ausgangspunkt vom Körper als übergeordnetem Element verwendet wird.

Abbildung 3: Position festlegen: relativ für Box. Sie können sehen, dass box-chd-chd jetzt Box als übergeordnetes Element verwendet.

Abbildung 4: Setzen Sie position: relative erneut für box-chd. Sie können sehen, dass box-chd-chd box-chd als übergeordnetes Element verwendet.

Es ist ersichtlich, dass, wenn das untergeordnete Element die Position „absolut“ und sein übergeordnetes Element die Position „relativ“ festlegt, sich das untergeordnete Element vom oberen linken Rand des übergeordneten Elements als Startpunkt aus bewegt und dem Näherungsprinzip folgt, d. h. das untergeordnete Element sucht nach oben nach dem übergeordneten Element, und wenn das erste übergeordnete Element mit relativem Element gefunden wird, wird dessen oberer linker Rand als Startpunkt verwendet.

Die Kombination aus relativ und absolut macht das Positionieren des Layouts bequemer und die zum Verschieben erforderliche Distanz wird ebenfalls reduziert. Es ist nicht erforderlich, Pixel der gesamten Seite ausgehend vom Hauptteil zu messen. Es ist außerdem einfach zu verwalten und hat eine klare Struktur.

Zusammenfassung: Im vorherigen Artikel ging es um Float-Layouttechniken, und in diesem Kapitel geht es um Position. Es ist ersichtlich, dass sowohl Position als auch Float eine Art Layoutmethode sind und jede ihre eigenen Anwendungsszenarien hat. Sie können die Layoutmethode entsprechend Ihren Anforderungen auswählen.