Warum werden meine absolut positionierten Elemente vertikal statt horizontal gestapelt?

Absolute Elemente werden vertikal statt horizontal gestapelt

In CSS kann die Positionierung von Elementen mit absoluter Positionierung zu unerwartetem Stapelverhalten führen. Um zu verstehen, warum absolute Elemente übereinander und nicht nebeneinander gestapelt werden, werfen wir einen Blick auf die Grundlagen der CSS-Positionierung.

Relative vs. absolute Positionierung

Wenn ein Element mit position: relative positioniert wird, behält es seine Position im normalen Dokumentfluss bei, kann jedoch mithilfe der Eigenschaften „oben“, „rechts“, „unten“ oder „links“ verschoben werden. Elemente mit relativer Positionierung haben keinen Einfluss auf das Layout umgebender Elemente.

Im Gegensatz dazu wird ein Element mit Position: absolut aus dem Dokumentfluss entfernt und relativ zu seinem enthaltenden Element oder dem nächstgelegenen positionierten Vorgänger positioniert. Absolute Elemente nehmen ihren eigenen Raum ein und interagieren nicht mehr mit anderen Elementen im Fluss.

In Ihrem Beispiel

In Ihrem Code haben sowohl #row1 als auch #row2 absolute Elemente Positionierung und sind damit unabhängig vom Dokumentenfluss. Da diese Elemente beide untergeordnete Elemente des absolut positionierten .containers sind, werden sie relativ dazu positioniert. Da #row1 vor #row2 positioniert ist, erscheint es darüber.

Lösung des Problems

Um #row1 und #row2 vertikal anzuzeigen, müssen Sie sie entfernen Ermitteln Sie die absolute Positionierung dieser Elemente und wenden Sie sie auf das enthaltende Element .container an. Dadurch können sich die Zeilen wie normale Blockelemente verhalten und vertikal untereinander gestapelt werden.

.container {
  position: absolute;
}

.row {
  position: static;
}

CSS-Positionen verstehen

Zur weiteren Verdeutlichung wollen wir die Unterschiede untersuchen CSS-Positionswerte:

• statisch: Elemente bleiben im normalen Dokument Fluss.
• relativ: Elemente behalten ihre Position im Fluss, können aber mithilfe der Eigenschaften „oben“, „rechts“, „unten“ oder „links“ verschoben werden.
• absolut: Elemente werden aus dem Fluss entfernt und relativ zu ihrem enthaltenden Element oder der nächstgelegenen Position positioniert Vorfahr.
• behoben: Elemente werden aus dem Fluss entfernt und relativ zum Ansichtsfenster positioniert.

Wenn Sie verstehen, wie die CSS-Positionierung funktioniert, können Sie die effektiv steuern Layout und Stapelung von Elementen auf Ihren Webseiten.

Das obige ist der detaillierte Inhalt vonWarum werden meine absolut positionierten Elemente vertikal statt horizontal gestapelt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!