¿Apilar DIV uno encima del otro?

116

¿Es posible apilar varios DIV como:

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

¿Entonces todos esos DIV internos tienen la misma posición X e Y? Por defecto, todos van debajo de otros aumentando la posición Y por la altura del último DIV anterior.

¿Tengo la sensación de que algún tipo de flotador o exhibición u otro truco podría morder?

EDITAR: El DIV principal tiene una posición relativa, por lo que el uso de la posición absoluta no parece funcionar.

— Torre
fuente

Para aclarar mi respuesta, desea posicionar absolutamente los divs internos.

— Matt

Relacionado: stackoverflow.com/q/2941189/435605

— AlikElzin-kilaka

168

Coloque el div externo como desee, luego coloque los divs internos usando absoluto. Todos se apilarán.

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

— Mate
fuente

1

No parece funcionar. Tal vez debería haber mencionado que tengo este escenario: <div style = "position: absolute ..."> <div style = "position :rative ..."> <div> apila esta </div> <div> pila esto </div> <div> apilar esto </div> <div> apilar esto </div> </div> </div>

— Torre

2

Desea posicionar absolutamente los divs que tienen "apilar esto" en ellos. Funciona, lo probé antes de publicar mi original. Si no coloca selectores de clase en sus divs, adapte el método de selección de div en la respuesta de Eric para seleccionar los divs de la pila.

— Matt

1

Tampoco funcionó para mí. Demasiados desconocidos quedan para los espectadores.

— yan bellavance

Obtuve los divs para apilar usando la posición: relativa y especificando la altura

— yan bellavance

¿Podría tener algo que ver con el accesorio de exhibición?

— yan bellavance

50

Para agregar a la respuesta de Dave:

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

— Eric Wendelin
fuente

No parece funcionar. Tal vez debería haber mencionado que tengo este escenario: <div style = "position: absolute ..."> <div style = "position: related ..."> <div> apila esta </div> <div> pila esto </div> <div> apilar esto </div> <div> apilar esto </div> </div> </div>

— Torre

Creo que en ese caso desea establecer "top: 0; left: 0;" en su div que tiene "posición: relativa". Definitivamente pruebe IE6 en eso, aunque como no puedo decir con certeza que funcionará.

— Eric Wendelin

10

Si quiere decir literalmente poner uno encima del otro, uno en la parte superior (las mismas posiciones X, Y, pero diferente posición Z), intente usar el z-indexatributo CSS. Esto debería funcionar (no probado)

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

Esto debería mostrar 4 en la parte superior de 3, 3 en la parte superior de 2, y así sucesivamente. Cuanto más alto sea el índice z, más alto se posiciona el elemento en el eje z. Espero que esto te ayude :)

— Jimmie Lin
fuente

6

style="position:absolute"

— Dave Swersky
fuente

5

Coloqué los divs ligeramente desplazados, para que puedas verlos en funcionamiento.
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
fuente

4

Ahora puede usar CSS Grid para solucionar este problema.

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

Y el CSS para esto:

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

— Moisés Gitau
fuente

0

Sé que esta publicación es un poco antigua, pero tuve el mismo problema y traté de solucionarlo durante varias horas. Finalmente encontré la solución:

si tenemos 2 casillas 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 haya un cuadro en la pantalla. Para hacer eso, debemos establecer margin-bottom igual a -height, de esta manera:

<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 bien para mí.

— Krzysztof Jarosz
fuente

0

Tenía el mismo requisito que probé a continuación.

#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

— Raphael
fuente