Wie kann verhindert werden, dass sich absolute Elemente in CSS überlappen?

Vertikale Überlappung der absoluten Elemente: Eine Lösung

In Ihrem HTML-Code haben Sie zwei Zeilen, #row1 und #row2, mit definiert absolute Positionierung. Das Problem entsteht, weil absolute Elemente aus dem normalen Dokumentenfluss entfernt und übereinander gestapelt werden, was zu überlappenden Inhalten führt.

Um dieses Problem zu lösen, müssen wir den Zweck und das Verhalten der absoluten Positionierung verstehen. Indem wir ein Element auf position: absolute; setzen, entfernen wir es aus dem Standardfluss und positionieren es relativ zu seinem am nächsten positionierten Vorfahren.

In Ihrem Beispiel sind .row und .col1, .col2 darin verschachtelte absolute Elemente .container, was ebenfalls absolut ist. Da jedoch alle drei Elemente absolut sind, werden sie alle unabhängig und überschneiden sich.

Um dieses Problem zu lösen, müssen wir eine geeignete Positionierungshierarchie einrichten. Wir können dies erreichen, indem wir .row auf relative Positionierung setzen. Auf diese Weise bleiben .col1 und .col2 absolut, werden aber relativ zu .row positioniert, das sich im Dokumentfluss befindet.

Diese Änderung ermöglicht, dass #row1 und #row2 unter Berücksichtigung der Normalen vertikal gestapelt werden Blockelementverhalten. Hier ist das geänderte CSS:

body { position:relative; min-height: 2em; width: 100%; }
.container {position:absolute;}
.row {position:relative;}
.col1, .col2 {position: absolute;}

Diese Änderung behält die von Ihnen benötigten Positionierungseigenschaften bei und stellt gleichzeitig sicher, dass #row1 und #row2 wie erwartet untereinander angezeigt werden.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass sich absolute Elemente in CSS überlappen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!