posicionar - subir div css
¿Apilando DIV uno encima del otro? (7)
¿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.
Para agregar a la respuesta de Dave:
div { position: relative; }
div div { position: absolute; top: 0; left: 0; }
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>
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;
}
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í
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 :)
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;
}
style="position:absolute"