Wie stapele ich absolut positionierte Elemente vertikal, ohne die absolute/relative Positionierung zu entfernen?-CSS-Tutorial-php.cn

Wie stapele ich absolut positionierte Elemente vertikal, ohne die absolute/relative Positionierung zu entfernen?

Susan Sarandon

Freigeben： 2024-12-25 07:54:12

Original

614 Leute haben es durchsucht

How to Stack Absolutely Positioned Elements Vertically Without Removing Absolute/Relative Positioning?

Positionierungsdilemma: Überlappende Elemente mit absoluter Positionierung

Im Webdesign kann die Verwendung der absoluten Positionierung nützlich sein, um bestimmte Elementlayouts zu erstellen. Es kann jedoch auch zu Herausforderungen führen, insbesondere wenn versucht wird, Elemente vertikal nacheinander zu stapeln.

Beachten Sie das folgende CSS-Snippet:

body {
  position: relative;
  min-height: 2em;
  width: 100%;
}

.container {
  position: absolute;
}

.row {
  position: relative;
}

.col1,
.col2 {
  position: absolute;
}

Nach dem Login kopieren

Und den entsprechenden HTML-Code:

<body>
  <div class="container">
    <div>

Nach dem Login kopieren

Mit diesem Setup sollen die beiden .row-Elemente vertikal gestapelt werden, anstatt sich wie bisher zu überlappen Tun. Wie kann dies erreicht werden, ohne die absoluten/relativen Positionierungseigenschaften zu entfernen?

CSS-Positionierung verstehen

Um eine Lösung zu finden, ist es wichtig, die verschiedenen Arten der CSS-Positionierung zu verstehen :

statisch: Elemente fließen normal im Dokument Layout.
relativ: Elemente werden basierend auf den Versätzen oben, rechts, unten und links verschoben, bleiben aber im Dokumentfluss.
absolut : Elemente werden aus dem Dokumentenfluss entfernt und relativ zu ihrem nächstgelegenen positionierten Vorgänger (nicht ihrem) positioniert übergeordnetes Element).
behoben: Elemente werden aus dem Dokumentfluss entfernt und relativ zum Ansichtsfenster positioniert, wobei mit der Seite gescrollt wird.

Das Problem mit überlappenden Elementen

In unserem Beispiel sind die .row und .col Elemente werden absolut positioniert. Das heißt, sie werden aus dem normalen Dokumentenfluss herausgenommen und übereinander gestapelt. Um dieses Problem zu lösen, müssen wir einen Weg finden, sie im Dokumentenfluss zu halten und gleichzeitig die absolute Positionierung für bestimmte Layoutzwecke beizubehalten.

Die Lösung: Doppelte Verschachtelung

Eine unorthodoxe, aber effektive Lösung besteht darin, ein zweites Containerelement zu erstellen, das die Zeilen absolut positioniert:

<body>
  <div class="container">
    <div class="inner-container">
      <div>

Nach dem Login kopieren

.container {
  position: relative;
  min-height: 2em;
  width: 100%;
}

.inner-container {
  position: absolute;
}

.row {
  position: relative;
}

.col1,
.col2 {
  position: absolute;
}

Nach dem Login kopieren

Mit dieser doppelten Verschachtelung wird das .inner-container fungiert nun als der nächstgelegene positionierte Vorfahre für die .row-Elemente. Dadurch werden die Reihen vertikal gestapelt, wobei das ursprüngliche Layout erhalten bleibt und gleichzeitig das Überlappungsproblem gelöst wird.

Hinweis: Diese Lösung behält die absolute Positionierung für andere Layoutzwecke bei und erreicht gleichzeitig die gewünschte vertikale Stapelung Elemente. Es wird jedoch nicht für den allgemeinen Gebrauch empfohlen und sollte als letzter Ausweg verwendet werden, wenn das Entfernen der absoluten/relativen Positionierung keine Option ist.

Das obige ist der detaillierte Inhalt vonWie stapele ich absolut positionierte Elemente vertikal, ohne die absolute/relative Positionierung zu entfernen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!