x

Cómo hacer un DIV detrás de otro en HTML

Por sara williams

En el código HTML, los elementos DIV crean distintas secciones para contenidos en las páginas web. Los desarrolladores utilizan los DIVs de varias maneras. Algunas veces para esconder o apilar contenidos hasta que cierta acción ocurra, como cuando el usuario cliquea en un vínculo. Puedes utilizar una combinación de HTML y hojas de estilo de cascada (CSS) para crear elementos DIV y luego colocarlos uno detrás de otro, gracias a la propiedad del CSS llamada "z-index". Mientras estableces la propiedad "posición" en cada DIV en tu código CSS, puedes agregar luego el valor "z-index" para apilar los DIVs uno detrás de otro.

Escribe en código HTML para un elemento DIV y coloca todo el contenido que quieras entre las etiquetas de apertura * y para cerrar *. Asígnale al DIV un atributo ID para nombrar el elemento. Deberías utilizar un nombre que sea único para ese elemento DIV y no usar el mismo ID más de una vez en la misma página web. Por ejemplo: **Contenido va aquí....*

Crea un segundo DIV debajo del primero y luego agrega todo el contenido que desees para ese DIV. Ponle un atributo ID con un nombre diferente al primero. **Contenido va aquí....**

Abre tu archivo CSS o localiza las etiquetas entre las que codificaste en el archivo HTML. Puedes agregar etiquetas si ya no están presentes. Utiliza el código CSS para darle a cada DIV un tipo de posición "relativa", como se muestra en este ejemplo: #firstdiv {position: relative;} #seconddiv {position: relative;}

Agrega la propiedad "z-index" del código CSS para cada elemento DIV. Coloca el valor para "z-index" más alto que para DIV para que apile encima del otro. El DIV más bajo en la pila obtiene el valor más bajo de "z-index".#firstdiv {position: relative; z-index: 2;} #seconddiv {position: relative; z-index: 1;} Puedes colocar el valor de "z-index" entre cero y 999. Puedes utilizar valores negativos, pero causan problemas en las composiciones complejas y no funcionan en las versiones más antiguas de Internet Explorer.