Einführung und Verwendung der relativen Positionierung und der absoluten Positionierung in CSS

1. Vier Positionswerte: statisch, relativ, absolut, fest.

Absolute Positionierung: absolut und fest werden zusammen als absolute Positionierung bezeichnet

Relative Positionierung: relativ

Standardwert: statisch

2 . Der Unterschied zwischen relativer Positionierung und absoluter Positionierung

Beispiel:

HTML-Code:

CSS-Code:

1.Position: relativ; wenn ein Element relativ positioniert ist, erscheint es zuerst an seiner Position. Anschließend verschieben Sie das Element „relativ“ zu seinem ursprünglichen Startpunkt, indem Sie eine vertikale oder horizontale Position festlegen. (Noch ein Punkt: Wenn das Element relativ positioniert ist, nimmt es immer noch den ursprünglichen Platz ein, unabhängig davon, ob es verschoben wird. Daher führt das Verschieben des Elements dazu, dass es andere Felder verdeckt.) Beispiel: #mybox{position: relativ left: 20px; top: 20px;} Der Effekt ist: Erstellen Sie diese Ebene im Landschaftsbild und verschieben Sie sie um 20 Pixel nach links.

2.position: absolute; gibt die absolute Positionierung an. Die Position wird basierend auf dem 0-Punkt in der oberen linken Ecke des Browsers berechnet. Die absolute Positionierung macht das Element unabhängig vom Dokumentfluss Raum einnehmen. Elemente im normalen Dokumentenfluss werden so angeordnet, als ob absolut positionierte Elemente nicht vorhanden wären. Es wird relativ zum nächstgelegenen positionierten Vorfahren positioniert, oder, wenn das Element keine positionierten Vorfahren hat, ist seine Position relativ zum frühesten enthaltenden Block. (Da absolut positionierte Boxen unabhängig vom Dokumentfluss sind, können sie andere Elemente auf der Seite abdecken und die Stapelreihenfolge dieser Boxen kann durch den Z-Index gesteuert werden. Je höher der Wert des Z-Index, desto weiter entfernt ist die Box positioniert der Heap. )

Die meisten Webseiten, die wir erstellen, sind also zentriert, daher muss dieses Element der Position eines bestimmten Elements auf der Webseite folgen, unabhängig von der Auflösung immer innerhalb der Seite Ein bestimmtes Element, dann funktioniert einfach absolut nicht. Die richtige Lösung besteht darin, das übergeordnete Element des Elements als position: relative; zu definieren (dies kann ein übergeordnetes Element oder position: absolute; sein) und das Element, das eine absolute Positionierung benötigt, auf position: absolute und dann auf top, right; Die Werte für , unten und links sind ausreichend, sodass der Referenzstandard für die Positionierung die obere linke Seite der oberen linken Eckpolsterung des übergeordneten Elements ist.

Das obige ist der detaillierte Inhalt vonEinführung und Verwendung der relativen Positionierung und der absoluten Positionierung in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!