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

Escrito por sara williams
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo hacer un DIV detrás de otro en HTML
(Comstock/Comstock/Getty Images)

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.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

  1. 1

    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í....*

  2. 2

    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í....**

  3. 3

    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;}

  4. 4

    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.

Consejos y advertencias

  • Siempre resguarda tu HTML original y los archivos CSS antes de editarlos.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles