html - respuesta - que hormona libera el miedo

Viendo un div encima de otro

Question

Tengo algo de HTML con dos divs:

<div>
<div id="backdrop"><img alt="" src=''/backdrop.png'' /></div>
<div id="curtain" style="background-image:url(/curtain.png);background-position:100px 200px; height:250px; width:500px;">&nbsp;</div>
</div>

Quiero que la segunda div #curtain aparezca en la parte superior de la div #backdrop . Los dos divs son del mismo tamaño, sin embargo, no estoy seguro de cómo colocar el segundo div encima del otro.

Answer 1

Aquí está el jsFiddle

#backdrop{border:2px solid red;
width:400px;
height:200px;
position:absolute;
}
#curtain {
border:1px solid blue;
width:400px;
height:200px;
position:absolute;
}

Usa el índice Z para mover el que quieres arriba.

Answer 2

Hay muchas formas de hacerlo, pero esto es bastante simple y evita problemas al interrumpir el posicionamiento del contenido en línea. Es posible que también deba ajustar los márgenes / relleno.

#backdrop, #curtain {
height: 100px;
width: 200px;
}
#curtain {
position: relative;
top: -100px;
}

Answer 3

Para mostrar correctamente un div encima de otro, necesitamos usar la position la propiedad de la siguiente manera:

• Div exterior: position: relative
• Div interno: position: absolute

He encontrado un buen ejemplo here :

.dvContainer {
position: relative;
display: inline-block;
width: 300px;
height: 200px;
background-color: #ccc;
}
.dvInsideTL {
position: absolute;
left: 0;
top: 0;
width: 150px;
height: 100px;
background-color: #ff751a;
opacity: 0.5;
}

<div class="dvContainer">
<table style="width:100%;height:100%;">
<tr>
<td style="width:50%;text-align:center">Top Left</td>
<td style="width:50%;text-align:center">Top Right</td>
</tr>
<tr>
<td style="width:50%;text-align:center">Bottom Left</td>
<td style="width:50%;text-align:center">Bottom Right</td>
</tr>
</table>
<div class="dvInsideTL">
</div>
</div>

Espero que esto ayude,
Zag

Answer 4

Utilice la position: absolute; CSS position: absolute; seguido de top: 0px; left 0px; top: 0px; left 0px; En el atributo de style de cada DIV. Reemplaza los valores de píxel con lo que quieras.

Puedes usar z-index: x; para establecer el "orden" vertical (cuál está "arriba"). Reemplace x con un número, los números más altos están encima de los números más bajos.

Aquí es cómo se vería su nuevo código:

<div>
<div id="backdrop" style="z-index: 1; position: absolute; top: 0px; left: 0px;"><img alt="" src=''/backdrop.png'' /></div>
<div id="curtain" style="z-index: 2; position: absolute; top: 0px; left: 0px; background-image:url(/curtain.png);background-position:100px 200px; height:250px; width:500px;">&nbsp;</div>
</div>