Cómo colocar un DIV transparente encima de otro DIV

Escrito por jim campbell | Traducido por beatriz sánchez
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo colocar un DIV transparente encima de otro DIV
Utilizar un DIV transparente te permite ocultar y mostrar el contenido dinámicamente dentro de tu DIV inferior. (Jupiterimages/Brand X Pictures/Getty Images)

La propiedad "absolute" de CSS te permite asignar por programación una ubicación para los contenedores DIV. Puedes crear capas con tus contenedores DIV y colocar uno encimo de otro. Un DIV transparente encima de otro mostrará solamente el DIV inferior, puesto que el superior no tiene un color sólido. Utilizar un DIV transparente te permite ocultar y mostrar el contenido dinámicamente dentro de tu DIV inferior.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

  1. 1

    Haz clic con el botón derecho sobre el archivo HTML que quieres editar. Haz clic en "Abrir con", y después pulsa sobre el programa del editor HTML en la lista de accesos directos.

  2. 2

    Crea un DIV inferior. El código siguiente demuestra cómo crear un DIV que quede colocado en la esquina superior izquierda del navegador del usuario:

    <div id="bottomdiv" style="position: absolute; left: 20px; top: 20px"> Mi contenido de la parte inferior </div>

  3. 3

    Crea el DIV ttransparente y colocarlo en el mismo lugar que el "bottomdiv" creado en el paso 2:

    <div id="topdiv" style="position: absolute; left: 20px; top: 20px; filter:alpha(opacity=0)"> Mi contenido de la parte superior </div>

    El estilo "opacity" en "0" crea un DIV transparente.

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