Einige Untersuchungen zu Positoin, absolut und relativ bei der CSS-Positionierung

Wenn Sie Div+CSS für das Website-Layout verwenden, müssen Sie die Positionierungsprobleme in CSS berücksichtigen, wenn Sie einige Spezialeffekte wie schwebende Ebenen ausführen. Dies erfordert die Verwendung des Positoin-Attributs usw. Freunde, die sich für CSS-Positionierung interessieren, werfen wir einen Blick darauf!

Das Positoin-Attribut hat vier Werte: statisch, fest, absolut und relativ. Die beiden letzteren werden häufig bei der Positionierung im Layout verwendet. Absolut bezieht sich auf die absolute Positionierung, also auf das Entfernen des Objekts Ziehen Sie den Dokumentfluss heraus, verwenden Sie links, rechts, oben, unten und andere Eigenschaften für die absolute Positionierung, während seine Kaskade durch die Z-Index-Eigenschaft definiert wird. 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 „Oben“ stellt den Abwärtsversatzabstand des Objekts relativ zur Originalposition dar.
Der Wert von „Unten“ stellt den Aufwärtsversatzabstand des Objekts relativ zu dar die ursprüngliche Position
Wenn beide gleichzeitig vorhanden sind, 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, nur Top ist wirksam; wenn nicht beides angegeben ist, stimmt die obere Position mit dem ursprünglichen Dokumentfluss überein, das heißt, 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:
//m.sbmmt.com/xiazai/shouce/22

Analyse der CSS-Positionierung und Beispiele für Anwendungsszenarien

10 Kursempfehlungen zur CSS-Positionierung

Einführung in Beispiele für die Positionierung von Hintergrundbildern mithilfe von CSS

Das obige ist der detaillierte Inhalt vonEinige Untersuchungen zu Positoin, absolut und relativ bei der CSS-Positionierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!