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.

— Torre
fonte

Para esclarecer minha resposta, você deseja posicionar absolutamente os divs internos.

— Matt

Relacionado: stackoverflow.com/q/2941189/435605

— AlikElzin-kilaka

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