Web-Frontend-Interviewfrage Nr. 8 – Absolute Positionierung und relative Positionierung

Relative Positionierung (relativ):

Lassen Sie uns zunächst über die relative Positionierung sprechen: Genau wie sein Name, relativ, muss es ein Referenzobjekt geben, aber diese Referenz ist nichts anderes, es ist es eine eigene Position im ursprünglichen Dokumentenfluss. Das -Objekt wird nach der relativen Positionierung nicht vollständig vom Dokumentfluss getrennt. Die ursprüngliche Position dieses Objekts im Dokument bleibt erhalten (ohne Scheißen in der Toilette), und das versetzte Objekt wird von anderen entfernt Objekte. Maskieren Sie die Ebene .

Die relativen Positionierungseigenschaften werden wie folgt zusammengefasst:

①Wenn bei relativ positionierten Elementen die Breite nicht festgelegt ist, entspricht die Breite der Breite des gesamten Browsers oder hängt von der Breite des übergeordneten Elements ab.

② Relativ positionierte Blockelemente bewegen sich relativ zu ihren ursprünglichen Positionen. Nach dem Verschieben nehmen sie immer noch die Position des Dokumentflusses ein und haben keinen Einfluss auf das Layout anderer Elemente

Das Folgende wird durch Code überprüft

Fügen Sie 5 Felder in den Browser ein, die durch verschiedene Farben dargestellt werden. Der Code lautet wie folgt

HTML-Code

CSS-Code

Erste Renderings

Legen Sie die relative Positionierung für das dritte Feld fest

Das Element wird relativ zu seiner ursprünglichen Position versetzt und seine Breite und Höhe bleiben unverändert. Es erweitert den Container und nimmt seine ursprüngliche Position im Dokumentenfluss ein, ohne das Layout zu beeinträchtigen andere Elemente.

Absolute Positionierung (absolut):

Das absolut positionierte Objekt wird vom Dokumentenfluss getrennt. Welche es ist, hängt davon ab, ob es übergeordnet oder übergeordnet ist. rechts, oben, unten usw. -Attribute sind absolut relativ zum nächstgelegenen übergeordneten Objekt, das relative oder absolute Positionierungseinstellungen hat Wenn das übergeordnete Objekt das Positionierungsattribut nicht festlegt, wird es relativ zum HTML-Stammelement positioniert. Nach dem Lesen einiger Beiträge habe ich festgestellt, dass einige Leute denken, dass das übergeordnete Objekt positioniert wird, wenn es das Positionierungsattribut nicht festlegt relativ zum Körper Diese Aussage ist falsch. Die Eigenschaften der absoluten Positionierung werden wie folgt zusammengefasst:

① Wenn die Breite eines absolut positionierten Blockelements nicht festgelegt ist, wird die Breite durch den Inhalt innerhalb des Elements

②Die ursprüngliche Position nach der Trennung entspricht leer, und die folgenden Elemente nehmen die Position ein

③Das absolut positionierte Objekt wird relativ zum eingestellt eines, das sich selbst am nächsten ist Positionieren Sie das übergeordnete Objekt mit relativer oder absoluter Positionierung

④ Wenn das übergeordnete Element nicht positioniert ist, positionieren Sie es relativ zum HTML-Stammelement

Im Folgenden werden diese fünf immer noch verwendet. Der Versatz jedes Kästchens wird zur Überprüfung verwendet

(1) Das Blockelement hat keinen Versatzwert

Die fünf Kästchen oben geben Kästchen5 nur eine absolute Positionierung und kein Offsetwert. Zu diesem Zeitpunkt schwebt das Blockelement einfach an seiner ursprünglichen Position. Wenn sich dahinter ein Blockelement befindet, nimmt es seine Position im Dokumentfluss ein, um den Effekt zu sehen.

Hinweis: Wenn die Breite eines absolut positionierten Blockelements nicht definiert ist, wird die Breite durch den Inhalt innerhalb des Elements bestimmt.

Die Darstellung ist wie folgt

Der Effekt des Hinzufügens einer Box6

Wie auf dem Bild zu sehen ist, Box6 hat bereits die Position von Box5 im Dokumentenfluss eingenommen.

(2) Es gibt einen Versatzwert

Wenn der Versatzwert festgelegt ist und das übergeordnete Element keine relative Positionierung oder absolute Positionierung festlegt, wird das Element relativ zum Stammelement positioniert (d. h. html-Element, beachten Sie, dass es relativ zum Stammelement und nicht relativ zum Körper ist) Verwenden Sie zur Überprüfung den Offset von Box5.

①Geben Sie Box5 einen Offset, das übergeordnete Element hat keine relative oder absolute Positionierung

Das Rendering ist wie folgt

②Geben Sie Box5 den gleichen Versatz und geben Sie dem Körperelement eine absolute Positionierung (Körperelementeinstellung für). Bei der absoluten Positionierung wird die Breite eines absolut positionierten Blockelements durch das längste p bestimmt und die Breite verringert):

Die Darstellungen sind wie folgt

Bildervon der App gesendet

Aus den beiden Darstellungen oben: Es ist offensichtlich, dass sie relativ sind. Die Positionierung relativ zum Wurzelelement unterscheidet sich von der Positionierung relativ zum Körper. Der Hauptunterschied besteht darin, ob der Rand-Wert des Körpers enthalten ist.

Als nächstes verschachteln Sie drei weitere übergeordnete Boxen außerhalb der fünf Boxen und geben Sie diesen drei übergeordneten Boxen eine Position, um zu überprüfen, ob sie basierend auf dem zuletzt positionierten übergeordneten Element versetzt sind.

Der Code lautet wie folgt

HTML-Code

CSS Code

Rendering

Bild aus der App

Aus dem oben Gesagten geht hervor, dass Box5 relativ zum Container der dritten Schicht positioniert ist, der dem Container am nächsten liegt. Wenn Sie interessiert sind, können Sie es versuchen und die Positionierung des Containers der dritten Ebene entfernen, um zu sehen, ob er relativ zum Container der zweiten Ebene positioniert ist. Ich habe es überprüft und werde das Bild nicht veröffentlichen.

Einige Schüler fragen sich möglicherweise, warum die äußerste Box auf absolute Positionierung und die anderen beiden auf relative Positionierung eingestellt werden sollte. Der Unterschied bei dieser Positionierungsmethode wirkt sich hauptsächlich auf die Breite der Box und die relative Positionierung von Blockelementen aus Die Breite ist nicht festgelegt. Wenn ein übergeordnetes Element vorhanden ist, wird seine Breite durch das übergeordnete Element bestimmt. Wenn der Inhalt dieses Blockelements zu groß ist, wird es auch groß gehalten .

Das heißt, die Breite des relativ positionierten Blockelements hängt vom übergeordneten Element ab. Welchen Effekt hat es also, wenn diese drei Container auf absolute Positionierung eingestellt sind? Rendering

Das Bild stammt aus der App

Wie aus dem Bild ersichtlich ist, hängt die Breite des Containers der dritten Ebene nicht mehr davon ab Das übergeordnete Element ist unabhängig vom Fluss, da es sich vom Dokument ändert und unabhängig ist und seine Breite nur durch den Inhalt bestimmt werden kann. Zusammenfassend lässt sich sagen, dass die Breite eines absolut positionierten Blockelements durch seinen eigenen Inhalt bestimmt wird. Wenn die Breite eines relativ positionierten Blockelements nicht festgelegt ist, wird standardmäßig die Breite des Browsers verwendet. Aber unabhängig von der Breite findet das absolut positionierte Element das übergeordnete Element, das ihm am nächsten liegt (absolute oder relative Positionierung), zur Positionierung.

Zusammenfassung:

relativ: Die Positionierung erfolgt relativ zur eigenen Position (beim Festlegen des Offsets erfolgt die Positionierung relativ zum eigenen Positionsoffset ). Das auf relativ gesetzte Element befindet sich noch im Dokumentfluss, die Breite und Höhe des Elements bleiben unverändert und das Festlegen des Versatzes hat keinen Einfluss auf die Position anderer Elemente. Der äußerste Container ist auf relative Positionierung eingestellt. Wenn die Breite nicht festgelegt ist, entspricht die Breite der Breite des gesamten Browsers.

absolut: Die Positionierung wird relativ zum übergeordneten Element bestimmt, das dem Element am nächsten liegt, das auf absolute oder relative Positionierung eingestellt ist. Wenn kein übergeordnetes Element auf absolute oder relative Positionierung eingestellt ist, wird das Element relativ zum Stammelement positioniert , das ist das HTML-Element. Das absolut festgelegte Element befindet sich außerhalb des Dokumentflusses. Wenn die Breite des Elements nicht festgelegt ist, wird die Breite durch den Inhalt im Element bestimmt. Nach dem Trennen ist die ursprüngliche Position gleichbedeutend mit Leersein, und die folgenden Elemente nehmen die Position ein.

Hinweis: Die experimentellen Ergebnisse in diesem Artikel werden erhalten, wenn das übergeordnete Element und die untergeordneten Elemente nicht auf eine feste Breite eingestellt sind. Wenn das übergeordnete Element auf eine feste Breite eingestellt ist, werden seine untergeordneten Elemente unabhängig davon positioniert Absolute Positionierung oder relative Positionierung. Kein untergeordnetes Element kann die Breite seines übergeordneten Elements überschreiten. Das übergeordnete Element ist der große Bruder und niemand kann ihn überschreiten.

Das obige ist der detaillierte Inhalt vonWeb-Frontend-Interviewfrage Nr. 8 – Absolute Positionierung und relative Positionierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!