1. Vier Werte von position: static, relative, absolute, fixed.
Absolute Positionierung: absolute und fixed werden zusammenfassend als absolute Positionierung bezeichnet
Relative Positionierung: relative
Standardwert: static
2. Der Unterschied zwischen relativer Positionierung und absoluter Positionierung
Beispiel:
HTML-Code:
CSS-Code:
Ausgangseffekt:
1. relative: verschiebt sich relativ zur ursprünglichen Position. Nach dem Setzen dieser Eigenschaft bleibt das Element weiterhin im Dokumentfluss und wirkt sich nicht auf das Layout anderer Elemente aus
Setzen Sie relative für die zweite Box:
Das Element wird relativ zu seiner ursprünglichen Position versetzt, Breite und Höhe bleiben unverändert, und es dehnt den Container aus.
2. absolute: Das Element verlässt den Dokumentfluss. Wenn ein Offset gesetzt ist, beeinflusst es die Positionierung anderer Elemente
Setze nur bei der fünften Box absolute:
Erklärung: Wenn ein Element keine definierte Breite hat, wird seine Breite durch den Inhalt innerhalb des Elements bestimmt, und die Wirkung ist dieselbe wie bei Verwendung der float-Methode.
Analyse des Prinzips der absolute-Positionierung:
1. Wenn das Elternelement keine relative oder absolute Positionierung gesetzt hat, wird das Element relativ zum Wurzelelement (d. h. dem html-Element) positioniert (das bedeutet, das Elternelement hat sie nicht gesetzt).
Gib box5 nun einen Offset-Wert, um dies zu überprüfen:
2. Wenn das Elternelement relative oder absolute Positionierung gesetzt hat, wird das Element relativ zum nächstgelegenen Elternelement positioniert, das relative oder absolute Positionierung gesetzt hat (oder genauer: relativ zum nächstgelegenen Elternelement positioniert, das nicht static ist, da das Element standardmäßig static ist).
Ergänzung: Manche Leute erklären online, dass das Element relativ zum ersten Elternelement positioniert wird, das nicht static ist. Ich denke, das kann leicht zu Missverständnissen führen. Das Obige ist meine eigene Definition.
Gib nun dem body-Element eine absolute Positionierung (das body-Element wird auf absolute gesetzt, die Breite des gesamten Containers wird durch das längste div bestimmt, daher wird die Breite kleiner):
Zu diesem Zeitpunkt ist box5 nun relativ zum body-Element positioniert
Ich habe die beiden obigen Bilder – das relativ zum html-Element positionierte und das relativ zu body positionierte – zusammengestellt. Aus dem Vergleich kann man in der unteren Abbildung sehen, dass box5, relativ zu body positioniert, weiter vom Text box1 entfernt ist. Wenn also kein Elternelement eine relative oder absolute Positionierung gesetzt hat, wird ein Element mit gesetztem absolute relativ zum html-Wurzelelement positioniert.
CSS-Code:
Nun überprüfe diese Aussage erneut:Wenn das Elternelement relative Positionierung oder absolute Positionierung gesetzt hat, wird das Element relativ zum nächstgelegenen Elternelement positioniert, das relative oder absolute Positionierung gesetzt hat
Umschließe die Boxen nun mit drei übergeordneten Containern, wie folgt:
HTML-Code:
Die CSS-Stile der drei übergeordneten Container sind wie folgt:
Das aktuelle Aussehen. Nun ist box5 nicht relativ zum ersten Element positioniert, das nicht static ist, wie angegeben (laut dieser Aussage sollte mein box5 nun relativ zum äußersten Container 1 versetzt sein), sondern es ist relativ zum nächstgelegenen Elternelement positioniert, das relative oder absolute Positionierung gesetzt hat:
Kommentiere nun die position des zweiten Containers und des dritten Containers aus (ohne position haben das Setzen von top-, left-, bottom- und right-Werten keine Wirkung), das Ergebnis ist wie folgt:
Nun ist das einzige äußere Elternelement von box5, das relative oder absolute gesetzt hat, der äußerste Container 1, also ist box5 nun relativ zum äußersten Container 1 positioniert. (Offensichtlich hat sich box5 bewegt)
Kommentiere nun nur die position des dritten Containers aus
Das Prinzip ist dasselbe. Nun ist es relativ zum zweiten Container positioniert (top: 50px, dem nächstgelegenen Elternelement, das relative oder absolute Positionierung gesetzt hat):
Sowohl der zweite als auch der dritte Container oben sind auf relative Positionierung gesetzt. Ändere sie nun auf absolute Positionierung:
CSS-Code:
Das Prinzip ist dasselbe wie beim Setzen des zweiten und dritten Containers auf relative, außer dass der dritte Container nach dem Setzen auf absolute zusammen mit seinem Inhalt das Dokument verlässt, sodass er nicht die Breite der beiden äußeren Container streckt
Aktueller Effekt:
Füge außen einen weiteren Container hinzu, um den Effekt zu überprüfen, dass die ersten beiden Ebenen oben nicht gestreckt wurden
Die Breite ist durch die Breite des übergeordneten Containers auf der oberen Ebene begrenzt. Wenn man nun den Container der ersten Ebene verbreitert, verbreitern sich die zweite und dritte Ebene entsprechend; der Effekt ist wie folgt:
Wenn sich jedoch ein langes div im Container befindet, kann der Container trotzdem gestreckt werden; der Effekt ist wie folgt:
Ergänzung:
Nachdem box2 auf absolute Positionierung gesetzt wurde, verlässt es den Dokumentfluss, box3 rückt nach oben, und die linke Seite wird von box2 überdeckt.
Auf der Grundlage des Obigen wird box3 auf absolute gesetzt. box3 verlässt den Dokumentfluss (als ob box3 nach oben schweben würde und über box2 schwebt), box4 rückt nach oben, box3 überdeckt box2 und einen Teil von box4.
Ähnlich wird box4, wenn es auf absolute Positionierung gesetzt wird, nach oben schweben und box3 und box2 überdecken.
Zusammenfassung
relative: Die Positionierung ist relativ zur eigenen Position des Elements(Wenn ein Offset gesetzt wird, wird es relativ zu seiner eigenen Position verschoben). Ein Element mit gesetztem relative bleibt weiterhin im Dokumentfluss, Breite und Höhe des Elements bleiben unverändert, und das Setzen eines Offsets wirkt sich nicht auf die Positionen anderer Elemente aus. Wenn der äußerste Container auf relative Positionierung gesetzt wird und keine Breite festgelegt wird, entspricht seine Breite der gesamten Browserbreite.
absolute: Die Positionierung wird relativ zum nächstgelegenen übergeordneten Element bestimmt, das absolute oder relative Positionierung gesetzt hat. Wenn kein übergeordnetes Element absolute oder relative Positionierung gesetzt hat, wird das Element relativ zum Wurzelelement positioniert, d. h. zum html-ElementEin Element mit gesetztem absolute verlässt den Dokumentfluss. Wenn für das Element keine Breite festgelegt ist, wird seine Breite durch den Inhalt innerhalb des Elements bestimmt. Nach dem Verlassen ist die ursprüngliche Position sozusagen leer, und die darunter liegenden Elemente nehmen diese Position ein.
Original-Link: http://www.cnblogs.com/yy95/p/5672440.html