un div en la parte superior 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 la segunda div #curtain que 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

Hay muchas maneras de hacerlo, pero esto es bastante simple y evita problemas con la interrupción del posicionamiento de 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 2

uso de CSS position: absolute; seguido por top: 0px; left 0px; en el atributo style de cada DIV. Reemplace los valores de píxeles con lo que desee.

Puede usar z-index: x; para establecer el "orden" vertical (cuál está "en la parte superior"). Reemplace x con un número, los números más altos se encuentran en la parte superior 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> 

Answer 3

Aquí es el jsFiddle

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

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

Uso índice Z para mover el que desee en la parte superior.

Answer 4

Para visualizar correctamente una div encima de otro, tenemos que utilizar la propiedad position de la siguiente manera:

• div externa: position: relative
• div interna: position: absolute

encontré una 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.