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

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;
}

Und den entsprechenden HTML-Code:

  <div class="container">
    <div>
<p>Mit diesem Setup sollen die beiden <strong>.row</strong>-Elemente vertikal gestapelt werden, anstatt sich wie bisher zu überlappen Tun. Wie kann dies erreicht werden, ohne die absoluten/relativen Positionierungseigenschaften zu entfernen?</p>
<p><strong>CSS-Positionierung verstehen</strong></p>
<p>Um eine Lösung zu finden, ist es wichtig, die verschiedenen Arten der CSS-Positionierung zu verstehen :</p>
<ul>
<li>
<strong>statisch</strong>: Elemente fließen normal im Dokument Layout.</li>
<li>
<strong>relativ</strong>: Elemente werden basierend auf den Versätzen oben, rechts, unten und links verschoben, bleiben aber im Dokumentfluss.</li>
<li>
<strong>absolut</strong> : Elemente werden aus dem Dokumentenfluss entfernt und relativ zu ihrem nächstgelegenen <strong>positionierten Vorgänger</strong> (nicht ihrem) positioniert übergeordnetes Element).</li>
<li>
<strong>behoben</strong>: Elemente werden aus dem Dokumentfluss entfernt und relativ zum Ansichtsfenster positioniert, wobei mit der Seite gescrollt wird.</li>
</ul>
<p><strong>Das Problem mit überlappenden Elementen</strong></p>
<p>In unserem Beispiel sind die <strong>.row</strong> und <strong>.col</strong> 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.</p>
<p><strong>Die Lösung: Doppelte Verschachtelung</strong></p>
<p>Eine unorthodoxe, aber effektive Lösung besteht darin, ein zweites Containerelement zu erstellen, das die Zeilen absolut positioniert:</p>
<pre class="brush:php;toolbar:false">
  <div class="container">
    <div class="inner-container">
      <div>
<pre class="brush:php;toolbar:false">.container {
  position: relative;
  min-height: 2em;
  width: 100%;
}

.inner-container {
  position: absolute;
}

.row {
  position: relative;
}

.col1,
.col2 {
  position: absolute;
}

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.