-
Cómo hacer una superposición de DIV Presentaciones
-
El atractivo de elementos DIV en diseños de página web está en su flexibilidad. Debido a DIVs pueden colocarse absolutamente en una página el uso de CSS, se 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 las posiciones dependen totalmente de su diseño, los conceptos básicos de capas superpuestas DIV y posición son universales.
Instrucciones
1 Crear un ID para el DIV situado más abajo en la hoja de estilo de su página web, es decir, "# div1 {}". Si usted no tiene una hoja de estilo creado para su página, inicie su hoja con:
<Style type = "text / css">
<! -
Introduzca el ID de su primera DIV, y poner fin a la hoja con "-> </ style>" antes de la etiqueta "</ head>". Todo CSS irá entre el "<! -" Y "->".
2 Ajuste la posición y la forma para su DIV inferior entre los "{}" entre paréntesis. Si va a configurar la posición en la esquina de la página para una capa de 50 por 50 píxeles, por ejemplo, la CSS se ve así:
div1 {
position: absolute;top: 0px;
left: 0px;
Ancho: 50px;
altura: 50px;}
3 Crear una segunda identificación para su siguiente elemento DIV, o "# div2 {}", y establecer el tamaño y la posición de ese elemento también. Si desea solapar completamente el primer elemento, establecer la posición que ser exactamente la misma. Si usted quiere que sea 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;}
4 Repita esto para tantas capas superpuestas como se desee. Una vez que sus capas están completas, añadir 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 índice z es "z-index: 2;".
5 Una mayor transparencia a su DIV, si lo desea, mediante la adición de "opacidad: 0,5; filtro: alfa (opacidad = 50);" a la CSS para el DIV que desea ser transparente. Por ejemplo, si la segunda y la más alta DIV se fija 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: alfa (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 la transparencia, la menos visible de su elemento.
6 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 ha completado, terminar con "</ div>". Repita este procedimiento para todas las capas especificadas en la hoja de estilo. Guarde la página, a continuación, comprobar que los elementos se colocan en capas y correctamente en su navegador de elección.
Consejos y advertencias
- Aunque se puede usar el elemento "style =" "" dentro de su etiqueta DIV para cambiar el estilo de la capa, esto crea código desordenado y es más difícil de seguir al editar su página o en busca de errores en el código.
