Empiler des DIVs les unes sur les autres?

Question

Est-il possible d'empiler plusieurs DIV comme:

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

Alors que toutes ces DIV internes ont la même position X et Y? Par défaut, ils vont tous les uns en dessous des autres, 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 un autre tour pourrait mordre?

EDIT: La division parent a une position relative, l’utilisation de position absolue ne semble donc pas fonctionner.

Answer 1

Positionnez la div externe comme vous le souhaitez, puis positionnez-la en utilisant absolu. Ils vont tous empiler.

<style type = "text / css">
.inner {
  position: absolue;
}
</ style>

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

Answer 2

Pour ajouter à la réponse de Dave:

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

Answer 3

Si vous voulez dire littéralement en plaçant l'un au-dessus de l'autre, l'un au-dessus (mêmes positions X, Y, mais différentes positions Z), essayez d'utiliser l'attribut CSS z-index . 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 au sommet de 3, 3 au sommet de 2, et ainsi de suite. Plus l'indice z est élevé, plus l'élément est placé sur l'axe z. J'espère que cela vous a aidé :)

Answer 4

style="position:absolute"

Answer 5

Pour plus de détails, Noah Stokes a écrit un excellent article sur le positionnement CSS sur A List Apart: http://www.alistapart.com/articles/css-positioning-101/