Empilhar DIVs um em cima do outro?

115

É possível empilhar vários DIVs como:

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

Para que todos os DIVs internos tenham a mesma posição X e Y? Por padrão, todos eles vão abaixo uns dos outros, aumentando a posição Y pela altura do último DIV anterior.

Tenho a sensação de que algum tipo de flutuação ou exibição ou outro truque pode morder?

EDIT: O DIV pai tem posição relativa, portanto, usar a posição absoluta não parece funcionar.

css html stack css-float Torre
fonte
Para esclarecer minha resposta, você deseja posicionar absolutamente os divs internos.
Matt
Relacionado: stackoverflow.com/q/2941189/435605
AlikElzin-kilaka

Respostas:

166

Posicione o div externo como quiser e, em seguida, posicione os divs internos usando absoluto. Eles vão se empilhar.

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

Matt
fonte
1
Não parece funcionar. Talvez eu devesse ter mencionado que tenho este cenário: <div style = "position: absolute ..."> <div style = "position: relative ..."> <div> empilhar </div> <div> empilhar isto </div> <div> empilhar isto </div> <div> empilhar isto </div> </div> </div>
Torre
2
Você deseja posicionar absolutamente os divs que possuem "stack this" neles. Funciona - experimentei antes de publicar o meu original. Se você não colocar seletores de classe em seus divs, adapte o método de seleção de div na resposta de Eric para selecionar os divs da pilha.
Matt
1
Não funcionou para mim também. Muitos desconhecidos deixados para os telespectadores.
yan bellavance
Eu tenho os divs para empilhar usando position: relative e especificando a altura
yan bellavance
pode ter algo a ver com o suporte de exibição?
yan bellavance
50

Para adicionar à resposta de Dave:

div { position: relative; }
div div { position: absolute; top: 0; left: 0; }
Eric Wendelin
fonte
Não parece funcionar. Talvez eu devesse ter mencionado que tenho este cenário: <div style = "position: absolute ..."> <div style = "position: relative ..."> <div> empilhar </div> <div> empilhar isto </div> <div> empilhar isto </div> <div> empilhar isto </div> </div> </div>
Torre
Acho que , nesse caso, você deseja definir "top: 0; left: 0;" no seu div que tem "position: relative". Definitivamente teste o IE6 nisso, embora não possa dizer com certeza se funcionará.
Eric Wendelin
10

Se você quer dizer literalmente colocar um em cima do outro, um no topo (mesmas posições X, Y, mas posições Z diferentes), tente usar o z-indexatributo CSS. Isso deve funcionar (não testado)

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

Isso deve mostrar 4 no topo de 3, 3 no topo de 2 e assim por diante. Quanto mais alto for o índice z, mais alto será o elemento posicionado no eixo z. Espero que isso tenha ajudado você :)

Jimmie Lin
fonte
6

style="position:absolute"

Dave Swersky
fonte
5

Posicionei os divs ligeiramente deslocados, para que você possa ver em funcionamento.
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

nycynik
fonte
4

Agora você pode usar o CSS Grid para corrigir isso.

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

E o css para isso:

.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;
}
Moses Gitau
fonte
0

Sei que este post é um pouco antigo mas tive o mesmo problema e tentei consertar várias horas. Finalmente encontrei a solução:

se tivermos 2 caixas posicionadas 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>

esperamos que haja uma caixa na tela. Para fazer isso, devemos definir margin-bottom igual a -height, desta forma:

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

funciona bem para mim.

Krzysztof Jarosz
fonte
0

Eu tinha o mesmo requisito que tentei no violino abaixo.

#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

Rafael
fonte