Cómo hacer que los paneles superpuestos CSS gota DIV

CSS permite superponer etiquetas div, por lo que puede crear una imagen a partir de imágenes separadas. Esto significa que usted puede cortar las imágenes en archivos más pequeños para producir menos carga del servidor, lo que hace que sus páginas se cargan más rápido en el navegador del usuario. Las clases CSS le ofrecen una manera de crear menús, indicaciones visuales y las cabeceras web de sus imágenes.

Haga clic en el archivo HTML que desea editar que contiene los divs. Haga clic en "Abrir con", a continuación, haga clic en el programa de edición de HTML que desee utilizar.

Crear las clases CSS. En este ejemplo, se utilizan dos divs superpuestas y cada div contiene una imagen. El siguiente código CSS establece la div propiedades superpuestas:

script type = "text / css"

div.leftimage {float: left;}

div.rightimage {float: right;}

div.leftimage_width {width: 200px;}

div.rightimage_width {width: 300px;}

div.overlap {position: relative; izquierda: 20px}

/ Script

Configure los divs se superpongan. El código HTML siguiente crea dos etiquetas div que utiliza para los paneles superpuestos:

div class = "leftimage leftimage_width overlapimg src =" firstimage.gif "/ div

div class = "rightimage rightimage_width img src =" secondimage.gif "/ div

Cambie las imágenes con sus propias imágenes del panel.

Guarde el archivo y abra la página HTML en el navegador Web. Revise los divs superpuestos. Si desea mover la imagen hacia la izquierda o hacia la derecha, debe modificar la configuración de clases CSS.Normalmente, se tarda unas cuantas pruebas antes de averiguar los ajustes de píxeles adecuada para sus etiquetas div.