Detaillierte Erklärung der CSS-Position: absoluter, relativer_Erfahrungsaustausch

Erläuterung zum CSS2.0-Handbuch:

Wenn Sie diesen Eigenschaftswert auf „absolut“ setzen, wird das Objekt aus dem normalen Dokumentfluss gezogen und unabhängig vom Layout des umgebenden Inhalts absolut positioniert. Wenn andere Objekte mit unterschiedlichen Z-Index-Eigenschaften bereits eine bestimmte Position belegen, beeinflussen sie sich nicht gegenseitig und überlappen sich an derselben Position. Zu diesem Zeitpunkt hat das Objekt keinen äußeren Patch (Rand), aber immer noch einen inneren Patch (Padding) und einen Rand (Rand).
Um die absolute Positionierung eines Objekts zu aktivieren, müssen Sie mindestens eine der Eigenschaften links, rechts, oben und unten angeben und den Wert dieser Eigenschaft auf absolut setzen. Andernfalls verwenden die oben genannten Eigenschaften ihren Standardwert auto , was dazu führt, dass das Objekt den normalen HTML-Layoutregeln entspricht und unmittelbar nach dem vorherigen Objekt gerendert wird.

TRBL-Attribute (TOP, RIGHT, BOTTOM, LEFT) sind nur gültig, wenn das Positionsattribut festgelegt ist.
Beim Festlegen von position:absolute
Wenn das übergeordnete Element (unendlich) das Positionsattribut nicht festlegt, wird das aktuelle Absolutwert mit dem TRBL-Attribut kombiniert, um die obere linke Ecke des Browsers als ursprünglichen Punkt zu positionieren
Wenn das übergeordnete Element (unendlich) das Positionsattribut festlegt, wird die aktuelle absolute Position unter Verwendung der oberen linken Ecke des übergeordneten Elements (am nächsten) als Originalpunkt in Kombination mit dem TRBL-Attribut verwendet.

Wenn position: relative
festgelegt ist, wird die obere linke Ecke des übergeordneten (nächsten) Inhaltsbereichs als Originalpunkt referenziert und mit dem TRBL-Attribut zur Positionierung (oder relativ zum positionierten Element in) kombiniert der übergeordnete Inhaltsbereich Das vorherige Element ist versetzt. Wenn kein übergeordnetes Element vorhanden ist, wird die obere linke Ecke von BODY als Originalpunkt verwendet. Die relative Positionierung kann nicht gestapelt werden. Bei Verwendung der relativen Positionierung nimmt das Element immer noch den ursprünglichen Platz ein, unabhängig davon, ob das Element verschoben wird oder nicht. Daher führt das Verschieben eines Elements dazu, dass es andere Felder verdeckt.

Wenn Sie Absolute zum Zentrieren der Webseite verwenden, können im Allgemeinen leicht Fehler gemacht werden, da sich die Webseite immer automatisch an die Größe der Auflösung angepasst hat und Absolute die obere linke Ecke von verwendet Der Browser dient als Originalpunkt und passt sich nicht an die Position an, wenn sich die Auflösung ändert. Manchmal ist es notwendig, sich auf den Z-Index zu verlassen, um das obere und untere Verhältnis des Containers festzulegen. Je größer der Wert, desto höher ist der Wertebereich. Zu beachten ist natürlich, dass die Eltern-Kind-Beziehung nicht mit dem Z-Index nach oben und unten eingerichtet werden kann. Das Kind muss oben und das Elternteil unten sein.

Wenn Sie diesen Eigenschaftswert auf relativ setzen, bleibt das Objekt im normalen HTML-Fluss, seine Position kann jedoch basierend auf dem vorherigen Objekt verschoben werden. Text oder Objekte, die einem relativ positionierten Objekt folgen, nehmen ihren eigenen Raum ein, ohne den natürlichen Raum des positionierten Objekts zu überschreiben. Im Gegensatz dazu nehmen Text oder Objekte, die einem absolut positionierten Objekt folgen, ihren natürlichen Platz ein, bis das positionierte Objekt aus dem normalen Dokumentfluss herausgezogen wird. Wenn Sie absolut positionierte Objekte außerhalb des sichtbaren Bereichs platzieren, werden Bildlaufleisten angezeigt. Wenn Sie ein relativ positioniertes Objekt außerhalb des sichtbaren Bereichs platzieren, wird die Bildlaufleiste nicht angezeigt. Tatsächlich besteht das Hauptproblem bei der Positionierung darin, sich die Bedeutung jeder Positionierung zu merken. Die relative Positionierung ist „relativ“ zur Anfangsposition des Elements im Dokumentfluss, während die absolute Positionierung „relativ“ zum nächstgelegenen, bereits positionierten Vorgängerelement ist.

Das Folgende ist eine Ergänzung:

Obwohl ich die absolute Positionierung (absolut) und die relative Positionierung (relativ) von CSS kenne, habe ich die damit verbundenen Effekte nie selbst geschrieben . !
Nach langer Arbeit ist es endlich fertig! Auch diese beiden Attribute habe ich etwas besser verstanden!

Die Zusammenfassung lautet wie folgt:

Sehen wir uns zunächst die folgende Ebenenstruktur an

Diese Ebene wendet nur Position an: relativ; Stil

Diese Ebene wendet nur Position an: absolut; Stil

Kein Stil

1. Absolut: nimmt keinen Platz ein, relativ: nimmt Platz ein!

Zum Beispiel die obere Struktur:

Die Ebene mit der ID rel nimmt bei der Anzeige eine Zeile ein! Die dahinter liegende Bauchmuskelschicht wird erst in der nächsten Zeile angezeigt!
Wenn die Ebene mit der ID abs angezeigt wird, überlappt sie mit der Ebene mit der ID sss!

2. Standardmäßig (Positionierung wird nicht mit Top usw. kombiniert) basiert die absolute Positionierung auf der übergeordneten Ebene.
Wenn die Ebene mit der oben genannten ID beispielsweise abs ist, ist dies nicht der Fall Wenn es mit „oben“ usw. positioniert wird, folgt seine Anzeigeposition der übergeordneten Posi-Ebene (Posi befindet sich in der unteren linken Ecke des Dokuments und befindet sich auch in der unteren linken Ecke)

3 oben, unten, rechts, links und andere Attribute, absolute Positionierung) verwendet das Fenster als Positionierung und relative verwendet seine eigene Belegung als Basislinie für den Versatz! Wie folgt:

Es wird kein Stil angewendet

Diese Ebene wendet Position an: relativ; unten: 30px; Stil

Diese Ebene gilt nur Position: absolut; unten: 30px; Stil

Der obige Code:

Die Ebene mit der ID rel wird nach oben verschoben und überlappt mit der Ebene mit der ID sss.
Die Ebene mit der ID abs wird an eine Position 30 Pixel vom Fenster entfernt verschoben, wobei das Fenster als verwendet wird die Grundlinie!
4. Wenn Sie bei der Kombination von Oben, Unten, Rechts, Links und anderen Attributen die übergeordnete Ebene als Positionierungsbasislinie verwenden möchten, wenden Sie einfach das absolute oder relative Attribut wie folgt an! :







Diese Ebene wendet den Stil an: relativ; unten: 30px;

Diese Ebene gilt nur Position: absolut; unten: 30px; Stil

Oben Code: id Für die Posi-Ebene können Sie auch das absolute Attribut verwenden! Der Layer mit der ID rel ist nicht betroffen und wird mit seiner eigenen Belegung als Basislinie verrechnet!

Die Ebene mit der ID „abs“ verwendet die Unterkante der Posi-Ebene mit der ID als Positionierungsbasislinie. Wenn die Höhe der Posi-Ebene zu diesem Zeitpunkt weniger als 30 Pixel beträgt, ist dies möglicherweise nicht der Fall sichtbar!