Impilare DIV uno sopra l'altro?

È possibile impilare più DIV come:

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

In modo che tutti quei DIV interni abbiano la stessa posizione X e Y? Per impostazione predefinita, vanno tutti uno sotto l'altro aumentando la posizione Y dell'altezza dell'ultimo DIV precedente.

Ho la sensazione che una sorta di galleggiante, display o altro trucco potrebbe mordere?

EDIT: il DIV genitore ha la posizione relativa, quindi l'uso della posizione assoluta non sembra funzionare.

Posiziona il div esterno come preferisci, quindi posiziona il div interno usando assoluto. Si accumuleranno tutti.

.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>

Da aggiungere alla risposta di Dave:

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

Se intendi letteralmente metterne uno sopra l'altro, uno sopra (stesse posizioni X, Y, ma posizione Z diversa), prova a utilizzare l' z-indexattributo CSS. Questo dovrebbe funzionare (non testato)

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

Questo dovrebbe mostrare 4 sopra 3, 3 sopra 2 e così via. Più è alto lo z-index, più alto è l'elemento posizionato sull'asse z. Spero che questo ti abbia aiutato :)

style="position:absolute"

Ho posizionato i div leggermente sfalsati, in modo che tu possa vederlo al lavoro.
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

Ora puoi usare CSS Grid per risolvere questo problema.

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

E il css per questo:

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

So che questo post è un po 'vecchio ma ho avuto lo stesso problema e ho provato a risolverlo diverse ore. Finalmente ho trovato la soluzione:

se abbiamo 2 scatole posizionate assolute

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

ci aspettiamo che ci sarà una casella sullo schermo. Per fare ciò dobbiamo impostare margin-bottom uguale a -height, in questo modo:

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

funziona bene per me.

Ho avuto lo stesso requisito che ho provato con il violino sotto.

#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