Heim  >  Artikel  >  Web-Frontend  >  Verstehen Sie absolutes und relatives_CSS/HTML in CSS

Verstehen Sie absolutes und relatives_CSS/HTML in CSS

WBOY
WBOYOriginal
2016-05-16 12:11:131283Durchsuche

Viele Freunde haben mich gefragt, wie man absolute 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 lautet: position:absolute; TOP, RIGHT, BOTTOM, LEFT (im Folgenden als TRBL bezeichnet) für die Positionierung. Wenn TRBL nicht festgelegt ist, basiert die Standardeinstellung auf dem ursprünglichen Punkt des übergeordneten Elements . 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 ist: position:relative; Es bezieht sich auf den ursprünglichen Punkt des übergeordneten Elements. Wenn es keinen übergeordneten Punkt gibt, wird der ursprüngliche Punkt von BODY verwendet der ursprüngliche Punkt in Verbindung mit TRBL. Zur Positionierung wird der ursprüngliche Punkt der aktuellen Ebene unter Bezugnahme auf den ursprünglichen Punkt des übergeordneten Inhaltsbereichs positioniert, wenn CSS-Attribute wie Auffüllung im übergeordneten Element vorhanden sind.

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.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn