Las capas o layers

Las capas son bloques con contenido html que pueden situarse en la página de manera dinámica y organizables en 3D. Realmente tienen sentido cuando se les aplican estilos CSS, pues es cuando sus ventajas se pueden aprovechar al cien por cien. Es quizas la mejor ilustración de lo que significa separar contenido de presentación. Gracias a las capas o bloques <div>...</div> es posible hacer que una página web se adapte al dispositivo desde el que se visualiza: móvil, tablet desktop

El nombre de capas proviene de Netscape, que implementaba estos elementos con la etiqueta <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, en HTML 4 la manipulación de estos elementos por parte de Micorsoft y Netscape son diferentes, ambos usan algunas extensiones propias, auqnue ambos admiten los standares de la W3C con lo que el uso de estos elementos es bastante universalizable. Actualmente con el auge del navegador Chrome los problemas de compatibilidad han desaparecido.

En realidad las capas no se definen completamente mediante el lenguaje html, 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"> .mi_capa { position:absolute; top:100px; left:20px; width:300px; heigth: 200px; <style>

Con esto hemos definido una clase denominada mi_capa, cuya altura (height) es de 200 px y anchura (width) 300 px. Además está situada a 100 px de la parte superior (top) y a 20 px del margen izquierdo de la página (left). Repito que hemos creado una clase para describir como es la capa, pero no hemos construido la capa. Para construirla usamos la etiqueta <div> y el atributo class

<div class="mi_capa"> <h1>Esto es contenido</h1> <p>Aquí sigue más contenido html </p> ... </div>

Cualquier bloque <div> con class="mi_capa" estará en esa posición y con ese tamaño.

Esta capa puede colocarse en cualquier parte de la ventana del navegador, pues su posición es absoluta (absolute). Pero también podemos definir capas de posicionamiento relativo (relative), 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 el desplazamiento de la capa respecto de donde la escribimos. Se definen así:

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

Este ejemplo te muestra dos capas, una absoluta y otra relativa, esta última está construida con una etiqueta <span>, para evitar el salto de línea propio de los bloques.

Existen varias propiedades de las capas que podemos modificar, como son la posición, la visibilidad, el orden en que se ponen en pantalla, etc... Esto es repetir lo visto en estilos CSS:

Propiedad	Significado	Valores
left y top	Sitúan la esquina superior izquierda de la capa respecto a la esquina superior izquierda de la capa donde esté metida. Hay que tener en cuenta que el documento completo también se considera una capa.	distancia en pixels, por defecto cero.
width y height	Determinan la anchura y altura de la capa.	un tamaño en pixels.
clip	Nos permite definir el área que se podrá ver dentro de la capa. Por ejemplo, clip:rect(20px 30px 40px 10px); recortará la capa creando un cuadro visible cuya esquina superior izquierda está a 10 pixels por la izquierda y 20 por arriba de la de la capa y cuyo tamaño sería de 30-10 de ancho y 40-20 de alto.	un área rectangular.
z-index	Las capas con un mayor z-index se colocarán más arriba (se dibujarán al final, encima de las otras). Debe ser un valor positivo y único: dos capas no pueden tener el mismo z-index.	número positivo, por defecto las capas definidas en el código html más tarde están más arriba.
visibility	Especifican si la capa debe verse o estar oculta.	visible, hidden (oculta) o inherit (hereda la visibilidad de la capa padre). En aquellas capas que simplemente estén dentro de la página principal, este valor es equivalente a visible.
background-image	Imagen de fondo de la capa.	una dirección URL de la imagen.
background-color	Color de fondo de la capa.	un código o nombre de color.