Hola, estoy tratando de colocar un div encima de otro div mediante programación (javascript o css). Los divs están completamente separados, lo que significa que se ven de la siguiente manera:

<div class="bottom">
   <img src="image"></img>
</div>
<div class="Top">
   <img src="image2"></img>
</div>

Soy nuevo en javascript, css, pero muchas de las soluciones que encuentro son para divs separados dentro de un div que les permite usar zIndex. Avíseme si desea que proporcione más información sobre mi pregunta. ¡¡Gracias por tu ayuda!!

0
paul590 9 may. 2016 a las 21:07

3 respuestas

La mejor respuesta

El elemento posicionado absolutamente NO NECESITA la propiedad z-index pero puede ayudar a prevenir conflictos en el futuro.

<style>
    .stack-wrapper { position: relative; }
    .bottom { position: static; z-index: 1; }
    .top { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; }
</style>

<div class="stack-wrapper">
    <div class="bottom">
       <img src="image"></img>
    </div>
    <div class="top">
       <img src="image2"></img>
    </div>
</div>
1
Brian 20 may. 2016 a las 23:05

Puede configurarlos con un posicionamiento absoluto y cambiar z-index para elegir qué div desea en la parte superior. Ver violín: https://jsfiddle.net/c259LrpL/27/

.top{position: absolute; top: 0; left: 0; z-index: 1;}
.bottom{position: absolute; top: 0; left: 0; z-index: -1;}
2
Adam Buchanan Smith 9 may. 2016 a las 18:11

Establezca la envoltura div como posición: relativa; entonces el div interno se colocará en la parte superior si usa position: absolute; y arriba: 0; :)

1
Medda86 9 may. 2016 a las 18:14