Capas y comportamientos

Las capas no son más que unos recuadros, elementos de bloque, destinados a contener y agrupar otros elementos, igual que los párrafos son elementos de bloque destinados a contener texto.

Las capas, también llamadas layers o divisiones, se crean con la etiqueta .
Al ser elementos contenedores, son muy útiles para organizar nuestros elementos. Si esto lo combinamos con el posicionamientoabsoluto, una propiedad CSS que nos permite colocar los elementos donde queramos en nuestra página, obtenemos los elementos ideales para maquetar nuestra página, es decir, distribuir el contenido en bloques.

En la imagen de arriba vemos varias capas azules distribuidas sobre una capa gris. Si estrechas o agrandas la ventana del navegador, verás que pueden llegar a solaparse.
Cuando convertimos unacapa en un elemento con posición absoluta (elemento PA), se muestra así en Dreamweaver:

Las capas pueden moverse de una posición a otra de la ventana pulsando sobre el recuadro blanco, y sin soltar el ratón, arrastrándola hacia la nueva posición.
También pueden ser redimensionadas pulsando sobre los recuadros negros, y arrastrándolos hasta conseguir el tamaño deseado.
Dentro del recuadro dela capa es posible insertar texto, tablas, imágenes, animaciones flash, y todos los elementos que puede contener un documento HTML.
Este icono sirve para seleccionar la capa al pulsar sobre él, y al eliminarlo se elimina también la capa.

Las capas, combinadas con JavaScript pueden dotar a una página de verdadero dinamismo.
Insertar una capa

Las capas pueden insertarse en una página através del menú Insertar, opción Objeto de diseño, donde encontramos Etiqueta Div (división simple) y Div PA (Capa con Posición Absoluta). Para lo que vamos a comentar, nos quedamos con la segunda opción.

Una vez se ha insertado la capa, pueden editarse sus atributos, pero para ello hay que seleccionarla primero.
Una capa puede seleccionarse de varias maneras. Una de ellas es pulsando sobre elicono correspondiente, pero esto no resulta útil cuando existen muchas capas en un mismo documento, ya que todas las capas tienen asociada una imagen igual a ésta, y no es fácil seleccionar la deseada a la primera.
Cuando existen varias capas en un mismo documento, es preferible seleccionarlas a través de la pestaña Elementos PA del panel CSS, que puede abrirse a través del menú Ventana opciónCapas. También puedes abrir el panel pulsando F2.

En dicho panel aparecen los nombres de todas las capas que existen en el documento actual, y para seleccionar una de ellas simplemente hay que pulsar sobre el nombre en el panel.

Formato de una capa
Las propiedades de la capa se especifican a través de su inspector de propiedades.

Elemento CSS-P es el nombre o ID de la capa. Desde aquípodemos asignarle otro ID, pero si lo hacemos perderá las propiedades que hayamos indicado para este elemento. Si lo que queremos es cambiar el ID por otro más descriptivo, podemos hacer clic derecho sobre el borde de la capa y elegir ID... en el menú contextual. También puede ser cambiado a través del panel Elementos PA, haciendo doble clic sobre él.
El resto de campos se refieren a laspropiedades CSS que definen la posición y tamaño de la capa.
Izq y Sup indican la distancia en píxeles (también podemos introducir un valor en porcentaje) que hay entre los límites izquierdo y superior del documento y los lados superior e izquierdo de la capa respectivamente.
Por defecto se toman los lados del documento, a no ser que creemos una Capa PA dentro de otra capa posicionada. En este caso, ladistancia se referirá a los lados de la capa padre, independientemente de su posición en el documento.
Si queremos que la posición se tome con respecto al elemento padre, pero este no tiene posicionamiento absoluto, podemos darle un posicionamiento relativo empleando CSS (En las propiedades de Posición del editor CSS, estableciendo position como relative). Esto no afectará a la posición del...