DIVs übereinander stapeln?

Ist es möglich, mehrere DIVs wie folgt zu stapeln:

<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

Damit alle diese inneren DIVs die gleiche X- und Y-Position haben? Standardmäßig gehen sie alle untereinander und erhöhen die Y-Position um die Höhe des letzten vorherigen DIV.

Ich habe das Gefühl, dass eine Art Schwimmer oder Display oder ein anderer Trick beißen könnte?

BEARBEITEN: Der übergeordnete DIV hat eine relative Position, daher scheint die Verwendung der absoluten Position nicht zu funktionieren.

Positionieren Sie den äußeren Teil wie Sie möchten, und positionieren Sie dann den inneren Teil mit Absolut. Sie werden sich alle stapeln.

.inner {
  position: absolute;
}

<div class="outer">
   <div class="inner">1</div>
   <div class="inner">2</div>
   <div class="inner">3</div>
   <div class="inner">4</div>
</div>

Um zu Daves Antwort hinzuzufügen:

div { position: relative; }
div div { position: absolute; top: 0; left: 0; }

Wenn Sie damit meinen, dass Sie eine übereinander und eine übereinander setzen (gleiche X-, Y-Position, aber unterschiedliche Z-Position), versuchen Sie, das z-indexCSS-Attribut zu verwenden. Dies sollte funktionieren (ungetestet)

<div>
    <div style='z-index: 1'>1</div>
    <div style='z-index: 2'>2</div>
    <div style='z-index: 3'>3</div>
    <div style='z-index: 4'>4</div>
</div>

Dies sollte 4 über 3, 3 über 2 usw. anzeigen. Je höher der Z-Index ist, desto höher ist das Element auf der Z-Achse positioniert. Ich hoffe das hat dir geholfen :)

style="position:absolute"

Ich habe die Divs leicht versetzt positioniert, damit Sie sie bei der Arbeit sehen können.
HTML

<div class="outer">
  <div class="bot">BOT</div>
  <div class="top">TOP</div>
</div>

CSS

.outer {
  position: relative;
  margin-top: 20px;
}

.top {
  position: absolute;
  margin-top: -10px;
  background-color: green;
}

.bot {
  position: absolute;
  background-color: yellow;
}

https://codepen.io/anon/pen/EXxKzP

Sie können dies jetzt mit CSS Grid beheben.

<div class="outer">
  <div class="top"> </div>
  <div class="below"> </div>
</div>

Und das CSS dafür:

.outer {
  display: grid;
  grid-template: 1fr / 1fr;
  place-items: center;
}
.outer > * {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
}
.outer .below {
  z-index: 2;
}
.outer .top {
  z-index: 1;
}

Ich weiß, dass dieser Beitrag etwas alt ist, aber ich hatte das gleiche Problem und habe versucht, es mehrere Stunden lang zu beheben. Endlich habe ich die Lösung gefunden:

wenn wir 2 Boxen absolut positioniert haben

<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px;'></div>
<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px;'></div>

Wir erwarten, dass es eine Box auf dem Bildschirm gibt. Dazu müssen wir den unteren Rand gleich der Höhe setzen. Gehen Sie also folgendermaßen vor:

<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px; margin-bottom: -200px;'></div>
<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px; margin-bottom: -200px;'></div>

funktioniert gut für mich.

Ich hatte die gleiche Anforderung, die ich unter Geige versucht habe.

#container1 {
background-color:red;
position:absolute;
left:0;
top:0;
height:230px;
width:300px;
z-index:2;
}
#container2 {
background-color:blue;
position:absolute;
left:0;
top:0;
height:300px;
width:300px;
z-index:1;
}

#container {
position : relative;
height:350px;
width:350px;
background-color:yellow;
}

https://plnkr.co/edit/XnlneRFlvo1pB92UXCC6?p=preview