Empiler les DIV les uns sur les autres?


116

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.


Pour clarifier ma réponse, vous voulez absolument positionner les div internes.
Matt

Réponses:


168

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>


1
Cela ne semble pas fonctionner. J'aurais peut-être dû mentionner que j'ai ce scénario: <div style = "position: absolute ..."> <div style = "position: relative ..."> <div> stack this </div> <div> stack this </div> <div> stack this </div> <div> stack this </div> </div> </div>
Tower

2
Vous voulez absolument positionner les divs qui contiennent "stack this". Cela fonctionne - je l'ai essayé avant de publier mon original. Si vous ne mettez pas de sélecteurs de classe sur vos divs, adaptez la méthode de sélection div dans la réponse d'Eric pour sélectionner les divs de pile.
Matt

1
Cela n'a pas fonctionné pour moi non plus. Trop d'inconnus laissés aux téléspectateurs.
yan bellavance

J'ai les div à empiler en utilisant la position: relative et en spécifiant la hauteur
yan bellavance

cela pourrait avoir quelque chose à voir avec un accessoire d'affichage?
yan bellavance

50

Pour ajouter à la réponse de Dave:

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

Cela ne semble pas fonctionner. J'aurais peut-être dû mentionner que j'ai ce scénario: <div style = "position: absolute ..."> <div style = "position: relative ..."> <div> stack this </div> <div> stack this </div> <div> stack this </div> <div> stack this </div> </div> </div>
Tour

Je pense que dans ce cas, vous voulez définir "haut: 0; gauche: 0;" sur votre div qui a "position: relative". Testez certainement IE6 à ce sujet, mais je ne peux pas dire avec certitude que cela fonctionnera.
Eric Wendelin

10

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é :)



5

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


4

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

0

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.


0

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.