Warum werden meine absolut/fest positionierten Elemente außerhalb der Position angezeigt?

Absolute/fest positionierte Elemente außerhalb des Standorts

Bei der CSS-Positionierung können absolute und feste Elemente verwirrend sein und zu Fehlausrichtungen führen. Hier gehen wir darauf ein, warum solche Elemente möglicherweise nicht wie erwartet angezeigt werden.

Fall 1: Absoluter grauer Kasten außerhalb des relativen übergeordneten Elements

Wenn ein Element absolut positioniert ist, ist seine Position relativ zu seinem nächsten Vorfahren mit einer nicht statischen Position genommen. In diesem Fall hat der übergeordnete .container die Position: relativ. Das absolute graue Feld befindet sich jedoch außerhalb seines Containers, da sein oberer Bereich auf „Auto“ eingestellt ist (Standardeinstellung).

Gemäß der CSS-Spezifikation wird „oben“ festgelegt, wenn „oben“ und „unten“ automatisch sind und die Höhe nicht „automatisch“ ist in die statische Position. Diese Position wird durch die Position des Elements bestimmt, wenn es nicht absolut positioniert wäre.

In diesem Fall liegt die statische Position des grauen Kastens außerhalb des Containers, da davor kein Rand oder Abstand vorhanden ist. Daher wird das graue Kästchen in der oberen linken Ecke des Dokumentkörpers und nicht im Container positioniert.

Fall 2: Graues Kästchen nicht in der oberen linken Ecke nach dem orangefarbenen Kästchen

Wenn das graue Feld an die zweite Position verschoben wird, wird es hinter dem vom orangefarbenen Feld verbleibenden Platz positioniert. Dies liegt daran, dass das orangefarbene Feld „position: relative“ hat, wodurch ein neuer Stapelkontext erstellt wird.

Elemente innerhalb eines Stapelkontexts werden relativ zum nächstgelegenen positionierten Vorgänger innerhalb dieses Kontexts positioniert. Das graue Kästchen wird nach dem orangefarbenen Kästchen positioniert, da es das nächste positionierte Element im Stapelkontext des Containers ist.

Fazit

Das Verständnis der Regeln für die absolute und feste Positionierung ist entscheidend für die genaue Platzierung der Elemente. Durch die Berücksichtigung statischer Positionen, Stapelkontexte und der Beziehungen zwischen positionierten und nicht positionierten Elementen können Entwickler sicherstellen, dass ihre Elemente wie beabsichtigt positioniert sind.

Das obige ist der detaillierte Inhalt vonWarum werden meine absolut/fest positionierten Elemente außerhalb der Position angezeigt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!