Warum sind meine absolut/fest positionierten Elemente falsch platziert?

Das Geheimnis falsch platzierter absoluter/fester Elemente: Position und Kontext verstehen

Verstehen Sie in Ihrem CSS-Layout das Verhalten von absoluten oder festen Elementen. Die Positionierung der Elemente ist entscheidend. Allerdings sind Sie in dieser Hinsicht auf Probleme gestoßen, und wir sind hier, um die Gründe dafür näher zu beleuchten. Lassen Sie uns auf die Einzelheiten eingehen:

Fall 1: Graues Kästchen außerhalb des relativen Elternteils

Ihre Erwartung war, dass das graue Kästchen in der oberen linken Ecke des Containers positioniert wäre , aber am Ende wurde es draußen positioniert. Der Grund liegt in den Eigenschaften, die Sie angewendet haben:

• Das graue Feld hat die Position: absolut. Dadurch wird seine Position unabhängig von seinem übergeordneten Element.
• Das übergeordnete Element, der Container, hat jedoch die Position: relativ. Dadurch wird ein neuer Positionierungskontext für das graue Feld erstellt.
• Innerhalb dieses Positionierungskontexts sind die Werte „oben: 0“ und „links: 0“ des grauen Felds relativ zur oberen linken Ecke seines übergeordneten Felds an seiner aktuellen Position.
• Aber denken Sie daran, dass der Container einen oberen Rand von 100 Pixeln hat, wie durch die Eigenschaft „top: 100px“ der orangefarbenen Box angegeben. Dadurch entsteht eine Lücke zwischen der oberen linken Ecke des übergeordneten Elements und seiner tatsächlichen visuellen Position, was dazu führt, dass das graue Feld außerhalb des sichtbaren Bereichs positioniert wird.

Fall 2: Graues Feld durch orangefarbenes Feld verschoben

Im zweiten Fall, als Sie das graue Kästchen zum zweiten Kind im Container verschoben haben, schien es sich nach rechts zu verschieben und dem orangefarbenen Kästchen zu folgen. Dies ist auf Folgendes zurückzuführen:

• Die Position: relativ des orangefarbenen Felds stellt einen neuen Positionierungskontext her.
• In diesem Kontext sind die Werte oben: 0 und links: 0 des grauen Felds relativ zur oberen linken Ecke des orangefarbenen Kästchens.
• Die Eigenschaft left: 100px des orangefarbenen Kästchens verschiebt das orangefarbene Kästchen nach rechts und Folglich folgt das graue Kästchen dieser Verschiebung und erscheint nach rechts verschoben.

Das obige ist der detaillierte Inhalt vonWarum sind meine absolut/fest positionierten Elemente falsch platziert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!