viernes, 20 de febrero de 2009

Posicionamiento de capas con CSS

Un comentario acerca de posicionamiento de capas con CSS.

En primer lugar, hay cuatro tipos de posicionamientos de capas... cinco si contamos el modo heredado.

· Estático: Modo normal de posicionamiento de los elementos. Fluyen con la página.
· Fijo: Permanece en una posición fija en la pantalla, aunque movamos el navegador. (Tipo mosca de televisión)
· Relativo: Respeta su espacio orginal y se desplaza desde el mismo. Es decir. Si pongo un elemento X en la página y lo muevo con deplazamiento relativo, el resto de elementos que lo redean NO se verán afectados por este deplazamiento. (Nota: si se verían afectados por un cambio de tamaño o margen del mismo...)
· Absoluto: Se situa en una posición fija en relación a su punto de referencia. El resto de elementos no se ve afectados (en cuanto a posición) por este. (Nota: si lo mueves y lo pones encima de otras cosas, las tapará...)

Cuestiones a tener en cuenta.

Compatibilidad
Los posicionamientos relativo y absoluto pueden dar problemas en algunos navegadores.

Normalmente el problema está en el IE. El tema está en que si el IE6 daba problemas con algunas cosas y el IE7 es una aberración y el IE8 aún no está termiando... Pues los problemas heredados del IE6 nos afectan todavía.

Actualmente, el uso del IE6 ha bajado ligeramente del 20% en las estadísticas, pero sigue siendo muy alto. Así que no podemos ignorar los problemas.

FAQ

¿Puedo cambiar el punto de referencia de una capa absoluta o es siempre la esquina superior izquierda de la página?
Si. El punto de referencia es la esquina superior izquierda del elemento que contiene a la capa.

¿Como es esto de compatible?
Consultando la tabla siguiente...

URL: http://www.quirksmode.org/compatibility.html

Observamos que no hay compatibilidad del 100% con el tema del posicionamiento. Por otro lado, el Acid Test...

URL: http://en.wikipedia.org/wiki/Acid2

Nos viene a confirmar que el CSS 2 (el que incluye las opciones de posicionamiento) no es completamente compatible.

¿Entonces qué?
La solución viable pasa por hacer las pruebas en los diversos navegadores que consideremos como objetivo viable de nuestras páginas. Y evaluar los resultados. Hay que tener también en cuenta que una mala deficinión del documento HTML puede provocar problemas en la carga de algunas propiedades.

No hay comentarios:

Publicar un comentario