posicionar - subir div css

¿Apilando DIV uno encima del otro?

Question

¿Es posible apilar múltiples DIV como:

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

¿Para que todos esos DIV internos tengan la misma posición X e Y? Por defecto, todos se encuentran uno debajo del otro, aumentando la posición Y por la altura de la última DIV anterior.

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

EDITAR: El DIV padre tiene una posición relativa, por lo tanto, usar la posición absoluta no parece funcionar.

Answer 1

Para agregar a la respuesta de Dave:

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

Answer 2

Posiciona el div externo como quieras, luego posiciona los divs internos usando absolute. Todos se apilarán.

<style type="text/css"> .inner { position: absolute; } </style> <div class="outer"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner">3</div> <div class="inner">4</div> </div>

Answer 3

Posicione los divs ligeramente desplazados, para que pueda verlo en el trabajo.
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

Answer 4

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

si tenemos 2 cajas 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 una casilla en la pantalla. Para hacer eso, debemos establecer un margen inferior igual a -hecho, haciendo 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í

Answer 5

Si quiere decir, literalmente, poner uno encima del otro, uno en la parte superior (posiciones de la misma X, Y, pero con una posición diferente de Z), intente utilizar el atributo z-index . 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 es el índice z, más alto se posiciona el elemento en el eje z. Espero que esto te ayude :)

Answer 6

Tuve el mismo requisito que he probado debajo del violí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

Answer 7

style="position:absolute"