Einführung in die Rolle von position:relative; in CSS

Dieser Artikel stellt hauptsächlich die Rolle von position:relative; in CSS vor. Jetzt kann ich ihn mit Ihnen teilen.

Position in CSS: Relative steuert Die relative Positionierung von Elementen bricht nicht vom Dokumentenfluss ab, während das relative Element scheinbar von seiner ursprünglichen Position abweicht, es bleibt jedoch im Dokumentenfluss unverändert

Zitat

statisch: Keine spezielle Positionierung, das Objekt folgt den HTML-Positionierungsregeln
absolut: Ziehen Sie das Objekt aus dem Dokumentfluss und verwenden Sie dabei Attribute wie links, rechts, oben, Boden usw. Absolute Positionierung. Und seine Kaskadierung wird durch das Z-Index-Attribut definiert. Zu diesem Zeitpunkt hat das Objekt keine Ränder, aber es gibt immer noch Abstände und Ränder
relativ: Das Objekt kann nicht gestapelt werden, sondern wird im normalen Dokumentfluss basierend auf den Attributen links, rechts, oben, unten und anderen versetzt
behoben: IE5. 5 und NS6 unterstützen dieses Attribut noch nicht

"Für ein statisches p#demo auf der Seite möchte ich, dass ein p#sub in dieser #demo irgendwo oben rechts positioniert wird Ecke relativ zur #demo. Ich sollte diese position:relative verwenden und dann top und right hinzufügen, um es einzuschränken.
Lassen Sie mich zunächst Ihre Zweifel beantworten:
Der Standardwert der Position ist statisch (d. h. für jedes Element, wenn sein Positionsattribut nicht definiert ist, ist seine Position:statisch)
Wenn Sie möchten, dass ein p#sub in dieser #demo relativ zu # The ist Demo ist irgendwo in der oberen rechten Ecke positioniert. #demo sollte relativ und #sub absolut positioniert sein.
Absolut wird relativ zum nächstgelegenen übergeordneten Element positioniert. Wenn Sie #demo nicht relativ positionieren, wird die absolute Positionierung von #sub relativ zum Körper positioniert.
relative wird relativ zu sich selbst positioniert, zum Beispiel: #demo{position:relative;top:-50px;}, dann verschiebt sich #demo um 50px relativ zu seiner ursprünglichen Position.
Anderes: Relativ bricht nicht vom Dokumentenfluss ab, absolute bricht vom Dokumentenfluss ab. Das heißt: Obwohl das relative Element scheinbar von seiner ursprünglichen Position abgewichen ist, bleibt es im Dokumentenfluss tatsächlich unverändert. Das absolute Element verändert nicht nur seine Position, sondern löst sich auch aus dem Dokumentenfluss.

habe ein Beispiel wie folgt geschrieben: rrree

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für alle zum Lernen hilfreich sein. Bitte achten Sie auf die chinesische PHP-Website!

Verwandte Empfehlungen:

So verwenden Sie das Attribut „position:fixed“, um ein DIV zu zentrieren

Verwenden Sie CSS3, um Material zu erreichen Designeffekt

Das obige ist der detaillierte Inhalt vonEinführung in die Rolle von position:relative; in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!