Interpretation des absoluten und relativen_Erfahrungsaustauschs

Blog des Autors Xiaoyi: http://andymao.com/

Viele Freunde haben mich gefragt, wie man Absolutes von Relativen unterscheidet und wie man sie verwendet? Wir alle wissen, dass „absolut“ absolute Positionierung und „relativ“ relative Positionierung bedeutet, aber was bedeuten „absolut“ und „relativ“? Wo ist das Absolute und relativ zu was? Welche Eigenschaften haben sie also und welche Wirkungen können sie hervorrufen? Welche Fähigkeiten gibt es zwischen den beiden? Lassen Sie uns sie unten einzeln erklären.

Absolut, die Schreibmethode in CSS ist: position:absolute; Es bezieht sich auf die obere linke Ecke des Browsers und arbeitet mit TOP, RIGHT, BOTTOM und LEFT (im Folgenden als TRBL bezeichnet) zusammen Positionierung: Wenn keine Einstellung vorhanden ist, wird TRBL standardmäßig auf den Ursprungspunkt des übergeordneten Elements gesetzt. Wenn TRBL festgelegt ist und das übergeordnete Element das Positionsattribut nicht festlegt, wird der aktuelle Absolutwert mit der oberen linken Ecke des Browsers als Originalpunkt positioniert und die Position wird durch TRBL bestimmt.

Im Allgemeinen ist es leicht, Fehler zu machen, wenn Sie Absolute zum Zentrieren der Webseite verwenden, da sich die Webseite immer automatisch an die Größe der Auflösung angepasst hat und Absolute die obere linke Ecke des Browsers als verwendet Der ursprüngliche Punkt, nicht die Auflösung, ändert seine Position aufgrund von Änderungen. Hier machen viele Menschen einen Fehler. Die Eigenschaften der Webseite auf der linken Seite sind denen von Relative sehr ähnlich, es gibt jedoch dennoch wesentliche Unterschiede.

Relativ, die Schreibmethode in CSS lautet: position:relative; Es bedeutet absolute relative Positionierung, es bezieht sich auf den ursprünglichen Punkt des übergeordneten Elements, ohne a parent Verwenden Sie dann den ursprünglichen Punkt von BODY als ursprünglichen Punkt und arbeiten Sie mit TRBL für die Positionierung zusammen. Wenn im übergeordneten Element CSS-Attribute wie Polsterung vorhanden sind, wird der ursprüngliche Punkt der aktuellen Ebene in Bezug auf den ursprünglichen Punkt des übergeordneten Elements positioniert Inhaltsbereich.

Manchmal müssen wir uns auch auf den Z-Index 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.