El mayor problema al usar capas en una página centrada es la posición de la capa. Cuando se cambia la resolución de la pantalla, la posición de la capa en relación con otros elementos centrados cambiará. Este artículo presenta formas de evitar que las capas queden desalineadas en relación con otros elementos centrados.
Posicionamiento absoluto y posicionamiento relativo
de capas Código de posicionamiento absoluto para capas:
<div id="Layer1" style="position:absolute; left:45px; top:25px; width:400px; height:155px; z-index:1"> </div>
Código de posicionamiento relativo de la capa:
<div id="Layer1" style="position: relativo; left:45px; top:25px; width:400px; height:155px; z-index:1"></div>
En la página centrada, inserte el código de capa de posicionamiento relativo y la posición de la capa estará en el centro de la página. Pero se volvió inamovible e incómodo de usar.
Inserte código de posicionamiento absoluto. Cuando la izquierda y la parte superior contienen valores positivos y negativos, la capa no se puede centrar. Cuando se borran los atributos izquierdo y superior, la capa se puede centrar y no hay desalineación en relación con otros elementos centrados en la página.
La diferencia entre capas de dibujo y capas de inserción
. Uso de capas de dibujo:
En una página centrada, utilice el código que representa la capa:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<cabeza>
<meta http-equiv="Tipo de contenido" content="text/html; charset=gb2312">
<título>div</título>
</cabeza>
<cuerpo>
<div id="Capa1" estilo="posición:absoluta; izquierda:40px; arriba:30px; ancho:265px; altura:75px; índice z:1"></div>
<div align="centro"></div>
</cuerpo>
</html>
Usar capa de inserción:
En una página centrada, utilice el código de capa de inserción:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<cabeza>
<meta http-equiv="Tipo de contenido" content="text/html; charset=gb2312">
<título>div2</título>
</cabeza>
<cuerpo>
<div align="centro">
<div id="Capa1" estilo="posición:absoluta; ancho:200px; alto:115px; índice z:1"></div>
</div>
</cuerpo>
</html>
Debido a que el código generado usando la "capa de dibujo" no está incluido en el código de centrado, para garantizar que la capa no esté desalineada con respecto a otros elementos en la página centrada, se debe usar una capa de inserción.
En las páginas centradas, se utilizan habitualmente dos métodos para garantizar que no haya desalineación de capas en relación con otros elementos centrados.
Usando la capa de inserción
1. En una página centrada, coloque el punto de inserción en el documento. En el ejemplo, coloque el punto de inserción en la tabla.
2. Seleccione el menú "Insertar"/"Capa".
3.Se inserta una capa en el documento. En el ejemplo, se inserta una capa en la tabla. Cuando se prueba en el navegador IE y se cambia la resolución, el contenido de la capa no estará desalineado en relación con otros elementos centrados.
Verifique las propiedades de esta capa en el panel de propiedades. Esta capa insertada borra los valores "izquierdo" y "superior".
Este método se utiliza a menudo para crear menús emergentes.
Uso de capas anidadas
Una capa anidada es una capa cuyo código está contenido dentro de otra capa.
Antes de utilizar capas anidadas, primero debe establecer algunos parámetros para la capa. Seleccione el menú "Editar"/"Preferencias" y en el cuadro de diálogo "Preferencias", seleccione "Compatibilidad con Netscape 4: Tamaño fijo al insertar capas" para que las capas anidadas creadas puedan ser compatibles con el navegador Netscape 4. Y marque "Anidamiento: usar anidamiento si está en capa".
Abra el panel Capas y desmarque "Evitar superposición".
Capa anidada:
inserte una tabla en una página centrada e inserte una capa en la tabla. Esta capa no estará desalineada con respecto a la tabla. En esta capa, utilice el comando "Insertar"/"Capa" para insertar una subcapa (capa anidada). No importa cómo mueva esta subcapa en la página, su posición no se desplazará con respecto a otros elementos centrados.
En una capa insertada, puede insertar varias capas anidadas y luego mover las capas anidadas a los lugares requeridos, para que pueda usar las capas como desee en la página centrada.
Conclusión: centre la página, cree menús emergentes, use el comando Insertar/Capa; use el diseño de capas y coloque el contenido en capas, use capas anidadas.