Empiler les DIV les uns sur les autres?

Est-il possible d'empiler plusieurs DIV comme:

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

Alors que tous ces DIV internes ont la même position X et Y? Par défaut, ils vont tous en dessous l'un de l'autre en augmentant la position Y de la hauteur du dernier DIV précédent.

J'ai le sentiment qu'une sorte de flotteur ou d'affichage ou autre truc pourrait mordre?

EDIT: Le DIV parent a une position relative, donc, l'utilisation de la position absolue ne semble pas fonctionner.

Positionnez le div externe comme vous le souhaitez, puis positionnez les div internes en utilisant absolu. Ils vont tous s'empiler.

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

Pour ajouter à la réponse de Dave:

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

Si vous voulez dire en plaçant littéralement l'un sur le dessus de l'autre, l'un sur le dessus (mêmes positions X, Y, mais position Z différente), essayez d'utiliser l' z-indexattribut CSS. Cela devrait fonctionner (non testé)

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

Cela devrait afficher 4 en haut de 3, 3 en haut de 2, et ainsi de suite. Plus l'indice z est élevé, plus l'élément est positionné sur l'axe z. J'espère que cela vous a aidé :)

style="position:absolute"

J'ai positionné les divs légèrement décalés, afin que vous puissiez le voir au travail.
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

Vous pouvez maintenant utiliser CSS Grid pour résoudre ce problème.

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

Et le css pour cela:

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

Je sais que ce post est un peu vieux mais j'ai eu le même problème et j'ai essayé de le réparer plusieurs heures. Enfin j'ai trouvé la solution:

si on a 2 cases positionnées absolue

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

nous nous attendons à ce qu'il y ait une boîte à l'écran. Pour ce faire, nous devons définir margin-bottom égale à -height, en procédant ainsi:

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

fonctionne bien pour moi.

J'ai eu la même exigence que j'ai essayée ci-dessous violon.

#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