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