Wie stapele ich überlappende, absolut positionierte Elemente in CSS vertikal?

Auflösen überlappender, absolut positionierter Elemente für vertikales Stapeln

In CSS kann die Positionseigenschaft auf verschiedene Werte eingestellt werden, einschließlich relativ, absolut und fest. Wenn ein Element absolut positioniert ist, wird es aus dem normalen Dokumentfluss entfernt und relativ zu seinem nächstgelegenen positionierten Vorgänger oder dem Ansichtsfenster positioniert. Dieses Verhalten kann dazu führen, dass Elemente übereinander gestapelt werden, was möglicherweise nicht der gewünschte Effekt ist.

Elementpositionierung verstehen

• Statisch (Standard): Elemente werden im Dokumentenfluss normal gestapelt.
• Relativ:Elemente bleiben im Dokumentenfluss, aber Ihre Position kann mithilfe von Oben, Rechts, Unten und Links angepasst werden.
• Absolut: Elemente werden aus dem Dokumentfluss entfernt und relativ zu ihrem nächstgelegenen positionierten Vorgänger positioniert.

Überlappende absolut positionierte Elemente

Im folgenden Beispiel sind die Elemente mit den Klassen .row und .col absolut positioniert, wodurch sie sich überlappen:

body {
  position: relative; /* Contains absolutely positioned elements */
}

.container {
  position: absolute;
}

.row {
  position: relative;
}

.col1, .col2 {
  position: absolute;
}

Um dieses Problem zu beheben und die Elemente vertikal zu stapeln, müssen wir ihre Höhen angeben und sicherstellen, dass ihre vertikale Position korrekt verwaltet wird.

Lösung Ohne Positionseigenschaften zu entfernen

Während es nicht ideal ist, das CSS für die Elemente zu ändern, besteht eine mögliche Lösung ohne Entfernung der Positionseigenschaften darin, die Höhe jeder Zeile anzugeben und die Top-Eigenschaft anzupassen der zweiten Zeile, um die Höhe der ersten Zeile zu berücksichtigen:

body {
  /* position: relative; remains unchanged */
}

.container {
  /* position: absolute; remains unchanged */
}

.row {
  position: relative;
  height: 2em; /* Specify height for vertical stacking */
}

.col1, .col2 {
  /* position: absolute; remains unchanged */
}

#row2 {
  top: 2em; /* Offset to account for the height of #row1 */
}

Die Lösung verstehen

• Wir behalten die absolute Positionierung der Elemente bei.
• Wir geben für jede .row eine Höhe an, um vertikales Stapeln zu ermöglichen.
• Wir passen die obere Eigenschaft der zweiten .row (#row2) an an Versetzen Sie es um die Höhe der ersten .row (#row1).

Überlegungen

• Stellen Sie sicher, dass die Höhen der .row-Elemente korrekt sind und etwaige Polsterungen oder Auffüllungen enthalten Rand.
• Diese Lösung ist möglicherweise nicht für dynamisch generierte Inhalte mit unbekannten Höhen geeignet.
• Dies wird im Allgemeinen nicht empfohlen mehrere verschachtelte, absolut positionierte Elemente haben, da dies zu komplexem Verhalten führen kann.

Das obige ist der detaillierte Inhalt vonWie stapele ich überlappende, absolut positionierte Elemente in CSS vertikal?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!