Imagen encima de otra con CSS HTML

Hola compañeritos.

Esta es la solución:

Estilos:

.visorbanner{

 overflow:hidden; 

 position: relative;/*tambien puede ser absolute si se quiere*/

 top: 0px;

 left: 0px;

 width: 500px;

 height: 540px;

 }

.slide

{

position: absolute;

top: 0px;

left: 0px;

}

y el HTML así:

<div class="visorbanner">

        <img id="slide0" class="slide" src="images/foto1.jpg" />

        <img id="slide1" class="slide" src="images/foto2.jpg" />

        <img id="slide2" class="slide" src="images/foto3.jpg" />

        <img id="slide3" class="slide" src="images/foto4.jpg" />

</div> 

Aquí un poco de información para explicar el asunto:

A veces necesitamos colocar una imagen encima de otra así que la clave es:

1. Entender como función las posiciones en CSS.

2. Colocar el CSS adecuado al elemento correcto.

Con respecto al primer punto:
Recordemos que la posición absoluta de un elemento html hace que se ubique según la pantalla EXCEPTO:
Si el div padre es posición relativa o absoluta.
Me explico.
Por ejemplo:
<div style="position:absolute;top:10px;"> //este div quedará ubicado según pantalla.
 <div style="position:absolute"> //este div quedara ubicado según su padre.
 </div>
<div>

Pero si:

<div> //este div quedará ubicado según pantalla.

 <div style="position:absolute"> //este div quedara ubicado según su pantalla, pues su padre no es relative ni absolute.

 </div>

<div>

Teniendo presente lo anterior como  lo aplicamos para colocar una imagen encima de otra?

PRIMERO: Definir un div contenedor con position absolute o relative.
SEGUNDO: Definir nuestras imagenes como posiciones ABSOLUTAS (no aplica relativas). Y colocarle top y left como 0px;

El resultado lo puedes mirar al inicio de la nota.

Espero le sirva de alguito...

Sean felices! :)