Einige Recherchen zu Positoin, Absolutheit und Relative im CSS-Positioning_Experience-Austausch

Das Positoin-Attribut hat vier Werte: statisch, fest, absolut und relativ. Die beiden letztgenannten werden häufig bei der Positionierung im Layout verwendet. Wie der Name schon sagt, bezieht sich „absolut“ auf die absolute Positionierung, also auf das Ziehen des Objekts aus dem Dokumentfluss Die Attribute links, rechts, oben, unten und andere führen eine absolute Positionierung durch, und ihre Kaskadierung wird durch das Z-Index-Attribut definiert. Das Objekt hat jetzt keine Ränder, aber immer noch Innenabstände und Ränder. Ralativ bezieht sich auf die relative Positionierung, bei der die Position im normalen Dokumentenfluss basierend auf den Attributen links, rechts, oben, unten und anderen ausgeglichen wird.
Aber was ist das absolute Gesetz und was ist das relative Gesetz? Ich habe es noch nie sorgfältig studiert und bin manchmal etwas verwirrt, wenn es um bestimmte Anwendungen geht. Ich glaube, dass viele Freunde dieses Problem auch haben werden. Ich habe es heute speziell getestet und bin zu den folgenden Schlussfolgerungen gekommen:

1. Wenn der Wert des Positoin-Attributs Relativ ist
Die ursprüngliche Position des Objekts bleibt erhalten, und die Objekte dahinter bleiben erhalten Der Dokumentenfluss behält weiterhin die ursprüngliche Position bei.
Der Wert von „Top“ stellt den Abwärtsversatzabstand des Objekts relativ zur Originalposition dar.
Der Wert von „Bottom“ stellt den Aufwärtsversatzabstand des Objekts relativ zu dar die ursprüngliche Position
Wenn beide gleichzeitig existieren, funktioniert nur Top.

Der Wert von left stellt die Entfernung dar, um die das Objekt relativ zur ursprünglichen Position nach rechts verschoben wird.
Der Wert von right stellt die Entfernung dar, um die das Objekt relativ zur ursprünglichen Position nach links verschoben wird 🎜> Wenn beide gleichzeitig vorhanden sind, funktioniert nur links.


2. Wenn der Positoin-Attributwert absolut ist Das Objekt wird aus dem Dokumentstrom extrahiert und die ursprünglich belegte Position wird durch das nachfolgende Objekt ersetzt
Der Wert von Oben stellt das Objekt dar. Der Abstand zwischen dem oberen Rand und dem oberen Rand des Browserfensters.
Der Wert von unten stellt den Abstand zwischen dem unteren Rand des Objekts und dem unteren Rand des Browserfensters dar.
Wenn beide gleichzeitig vorhanden sind Zu diesem Zeitpunkt ist nur Top wirksam. Wenn beides nicht angegeben ist, stimmt die obere Position mit dem ursprünglichen Dokumentfluss überein, dh die vertikale Position bleibt unverändert.

Der Wert von left repräsentiert den Abstand zwischen dem linken Rand des Objekts und der linken Seite des Browserfensters
Der Wert von right repräsentiert den Abstand zwischen dem rechten Rand des Objekts und der rechten Seite von Das Browserfenster
Wenn beide gleichzeitig vorhanden sind, funktioniert nur links. Wenn keines von beiden angegeben ist, stimmt seine linke Seite mit der ursprünglichen Dokumentflussposition überein, dh die horizontale Position bleibt unverändert.

Wenn der Positoin-Attributwert absolut ist und ein übergeordnetes Objekt der ersten Ebene vorhanden ist (sei es ein übergeordnetes Objekt oder ein übergeordnetes Objekt oder eine höhere Ebene, werden alle gleich behandelt, ^_^). Der Wert des Positoin-Attributs ist Relativ, dann wird die obige relative Positionierung des Browserfensters zur relativen Positionierung des übergeordneten Objekts, was für eine präzise Positionierung sehr hilfreich ist.
Weitere Informationen zu CSS finden Sie im Handbuch:
/shouce/css/index.html Zu dem Schluss, zu dem ich nach langer harter Arbeit gekommen bin, hoffe ich, dass es so sein wird nützlich für alle. Wenn es irgendwelche Versehen gibt, korrigieren Sie mich bitte.