Cómo hacer un DIV Presentaciones Overlay

El atractivo de los elementos DIV en sitios web diseños está en su flexibilidad. Debido DIVs pueden colocarse absolutamente en una página usando CSS, puede establecer una serie de elementos superpuestos o incluso apilar elementos uno encima del otro para crear efectos visuales interesantes. El uso de CSS y DIVs, se puede apilar, posición e incluso cambiar la transparencia de los DIVs en su página con las mínimas molestias. Si bien los detalles individuales de posiciones dependen totalmente de su diseño, los aspectos básicos de superposición y capas DIV posición son universales. 

PLANOS DE PLANTILLA

Lo que necesita

Editor de texto plano

Navegador Web

Crea un identificador para el DIV situado más abajo en la hoja de estilos de la página Web, es decir, "# div1 {}". Si usted no tiene una hoja de estilo creado para su página, empieza la hoja con:

Tipo style = "text / css"

! -

Introduzca el ID de su primer DIV, y poner fin a la hoja con "--/style" antes de la etiqueta "/ head". Todas CSS pasará entre "-" y "-".

Ajuste la posición y la forma para su DIV inferior entre los "{}" corchetes. Si va a configurar la posición de la esquina de la página para una capa de 50 por 50 píxeles, por ejemplo, el CSS se ve así:

# Div1 {

position: absolute;

top: 0px;

left: 0px;

Ancho: 50px;

altura: 50px;}

Crear un segundo identificador para el siguiente elemento DIV, o "# div2 {}" y establecer el tamaño y la posición de ese elemento también. Si desea superponer completamente el primer elemento, establezca la posición de ser exactamente el mismo. Si usted quiere que ser compensado por 10 píxeles desde la esquina superior izquierda, el CSS se ve así:

# Div2 {

position: absolute;

top: 10px;

izquierda: 10px;

Ancho: 50px;

altura: 50px;}

Repita esto para tantas capas superpuestas como usted desea. Una vez que las capas están completas, agregue el elemento "z-index" para decirle al navegador qué capa se encuentra en la parte inferior y que está en la parte superior. La capa inferior debe ser "z-index: 1;" con la capa superior que tiene el número más alto. Si tiene dos capas y la segunda capa es en la parte superior, el z-index es "z-index: 2;".

Añade transparencias a una DIV, si lo desea, mediante la adición de "opacidad: 0,5; filtro: alpha (opacidad = 50)," a la CSS para el DIV quieres ser transparente. Por ejemplo, si la segunda y más alta DIV se establece en el 50 por ciento de transparencia, la CSS se ve así:

# Div2 {

position: absolute;

top: 10px;

izquierda: 10px;

Ancho: 50px;

altura: 50px;

z-index: 2;

opacidad: 0,5;

filtro: alpha (opacidad = 50);}

La etiqueta de "opacidad" funciona en la mayoría de los navegadores, la etiqueta de "filtro" se incluye para Internet Explorer, que no reconoce la "opacidad". Cuanto menor sea el número de su transparencia, menos visible su elemento.

Crear el elemento DIV en el cuerpo de su página. Su primera DIV comienza con "div id =" div1 "" seguido por el contenido de la capa. Una vez que el elemento se haya completado, terminar con "/ div." Repita esto para todas las capas especificadas en la hoja de estilos. Guarde la página, a continuación, compruebe que los elementos se colocan en capas y correctamente en el navegador de su elección.

Consejos y advertencias

Si bien se puede utilizar el elemento "" style = "" en su etiqueta DIV para cambiar el estilo de la capa, esto crea código desordenado y es más difícil de seguir a la hora de editar su página o en busca de errores en el código.