CAPAS O LAYERS

Las capas son bloques con contenido HTML que pueden posicionarse de manera dinámica y organizables en 3D. Realmente tienen sentido dentro de los estilos CSS, de hecho sus ventajas solo se pueden aprovechar al cien por cien utilizando estilos CSS. Es la mejor ilustración de lo que significa separar contenido de presentación.
En realidad, el nombre de capas proviene de Netscape, que estos elementos los implementaba como <layers>, en castellano capas. Las versiones modernas de Netscape (de la 6 en adelante) ya no usan esta etiqueta si no que se han decantado por la más standard <div>
No obstante la manipulación de estos elementos por parte de Micorsoft y Netscape son diferentes, ambos usan algunas extensiones propias, aunque ambos admiten los estándares de la W3C con lo que el uso de estos elementos es bastante universalizable.
En realidad las capas no se difinen completamente mediante el lenguaje HTML, sino necesitan del lenguaje de definición de estilos CSS. Entre ambos podemos colocar en nuestras páginas estos elementos movibles, ocultables y en general manipulables de forma dinámica. Por ejemplo:

<STYLE TYPE="text/css">
  .la_capa {position:absolute; top:100px; left:20px; width:300; heigth: 200}
</STYLE>

Con esto hemos definido un tipo de capa, denominda la_capa, cuya altura es de 200 px y anchura 300 px. Además está situada a 100 px de la parte superior y a 20 px del margen izquierdo de la página. Repito que hemos definido una clase capa, pero no hemos contruido la capa. Para construirla usamos la etiqueta <DIV> y el atributo ID

<DIV ID="micapa">
  <H1>Esto es contenido</H1>
  <P>Aquí sigue más contenido HTML </p>
  ...
</DIV>

Cualquier bloque <DIV> con ID="mi_capa" estará en esa posición y con ese tamaño.
Esta capa puede colocarse en cualquier parte de la ventana, su posición es absoluta (absolute). Pero también podemos definir capas de posicionamiento relativo, es decir, que más que definir las coordenadas de suposición respecto a la ventana, describimos su posición respecto al lugar donde aparezca en el texto. En otras palabras: describimos desplazamiento de la capa respecto de donde la ponemos. Se definen así:

<STYLE TYPE="text/css">
  .relativa {position: relative; left: 20px;  top: 100px;}
</STYLE>