web-dev-qa-db-fra.com

Empiler des DIVs les unes sur les autres?

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 la position absolue ne semble donc pas fonctionner.

csshtmlstackcss-float
98
Tower

Positionnez la div externe comme vous le souhaitez, puis positionnez-la 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>
143
Matt

Pour ajouter à la réponse de Dave:

div { position: relative; }
div div { position: absolute; top: 0; left: 0; }
46
Eric Wendelin

J'ai positionné les divs légèrement décalés, pour 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

5
nycynik

Si vous voulez dire littéralement en plaçant l'un sur l'autre, l'un sur l'autre (mêmes positions X, Y, mais une position Z différente), essayez d'utiliser l'attribut z-index 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 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é :)

5
Jimmie Lin

style="position:absolute"

4
Dave Swersky

J'ai eu la même exigence que j'ai essayé en dessous de 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

0
Raphael

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. Finalement j'ai trouvé la solution:

si nous avons 2 boites positionnées en 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 case à l'écran. Pour ce faire, nous devons définir margin-bottom égal à -height, 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
Krzysztof Jarosz