Absolutamente relativo

Este título aparentemente paradójico procede el título original de un artículo en inglés Relatively Absolute de Tommy Olson en el que se intenta ofrecer una aclaración del sentido de los diversos modos de posicionamiento mediante CSS. De hecho el contenido de este apartado del curso no es una traducción del mismo pero sí una adaptación basada en lo que allí se plantea.

Para diseñar una página web, además de las decisiones referentes a las fuentes, colores y elementos gráficos, hay que elegir una disposición de los componentes para lo cual se pueden emplear tablas, flotaciones y posicionamiento.

El uso de las tablas, aunque sigue siendo probablemente el método más extendido es el menos recomendable de todos por su incidencia negativa en la accesibilidad y su falta de adecuación para una correcta estructuración de la información. De hecho está totalmente desaconsejado con el W3C.

La utilizacion de la propiedad float es un método mucho más acorde con los estándares y puede ser suficiente en muchas ocasiones.

El posicionamiento es la tercera técnica y la que más dificultades de interpretación tiene, por lo que vamos a intentar aclararlo.

Para empezar vamos a tomar como referencia una serie numérica: 1, 2, 3,... en la que cada número ocupa de forma natural una posición: el 2 aparece detrás del 1 y antes del 3. Los elementos que componen una página web siguen el mismo esquema y tienen un orden natural que es su orden de aparición en el código que genera la página, por lo que podríamos decir que coincidirían con el comportamiento de una serie numérica. (Fíjate que he especificado el orden de aparición en el código, no el orden de aparición en la página porque podríamos confundirnos con lo que vemos si nos guiamos por la presentación de los elementos en pantalla)

Una vez fijada la referencia consideremos los diferentes valores que puede adoptar la propiedad position

static: Es el valor por defecto. Cualquier elemento con position:static se situará en la ventana en la posición por defecto de acuerdo a su orden de aparición en el flujo del documento, sin modificar la posición. Dada esta particularidad podría pensarse que su efecto será nulo. En parte es así ya que no sirve para modificar la posición de un elemento, pero en algún momento será necesario recurrir a este valor para restaurar los valores por defecto.
relative: Algunas veces el lenguaje nos juega malas pasadas y esta puede ser una de ellas. La idea de posición relativa nos sugiere que debemos considerar un elemento ajeno como punto de referencia para situar elemento al que le aplicamos esta propiedad y realmente no es así: la posición relativa toma como referencia la posición que ocuparía el elemento si se respeta el flujo del documento sin modificar la situación que le correspondería en ese caso.

Si le aplicamos a un elemento la propiedad position:relative pero no especificamos ningún valor de desplazamiento el efecto es el mismo que si no la hubiéramos aplicado o hubiéramos utilizado el valor por defecto position:static. Si le adjudicamos un valor top:10px el elemento se desplazará 10 píxeles hacia abajo respecto a la que habría sido su posición normal. También podríamos ponerle valores negativos. Además, dado que lo único que hacemos es desplazar el elemento pero éste sigue ocupando lo mismo, es innecesario especificar un valor para bottom o right si lo hemos hecho para top y left (o viceversa)

Los elementos posicionados relativamente siguen en el flujo del documento ocupando el espacio que les corresponde, pero no donde aparecen sino donde habrían estado si hubieran estado posicionados estáticamente. Por ello la utilidad del posicionamiento relativo no se aplica excesivamente al desplazamiento de elementos, sino más bien a convertir elementos en posicionados, ya que una vez aplicada, aunque no movamos el elemento ni un píxel servirá como referencia para que los elementos hijos, que hereden alguna propiedad del que tiene position:relative, dispongan de un nuevo punto de cálculo, especialmente cuando se utilice el valor absolute.
absolute: Si lo anterior puede habernos procucido un cierto desconcierto, esto va a acabar de complicar la situación: la interpretación de posición absoluta que podríamos deducir del término tampoco es correcta.

Cuando adjudicamos a un elemento position:absolute y le aplicamos un desplazamiento la nueva posición se calcula localizando el primer ancestro posicionado y situando los bordes a la distancia indicada respecto a los bordes de ese elemento. En caso de que no exista ningún ancestro posicionado la especificación CSS2. toma como referencia el bloque contenedor inicial, indicando que será el navegador el que determine cuál es, lo cual suele traducirse en que se toma como referencia el elemento body que coincide con la ventana de la aplicación.

Una cuestión que hay que tener en cuenta es que, cuando un elemento está posicionado con esta propiedad, sale del flujo del documento, por lo que el lugar que le correspondería es ocupado por el siguiente elemento, lo cual supone que podemos encontrarnos con que un elemento puede quedar debajo de otro que esté situado de forma absoluta.

En los navegadores con soporte completo para CSS se pueden especificar valores para los cuatro costados y el navegador se encarga de calcular el ancho, pero no ocurre así con Internet Explorer, lo cual nos obliga a especificar, al menos, la anchura del elemento posicionado. Se pueden indicar valores negativos para las distancias de los cuatro lados, aunque siempre habrá que tener en cuenta cuál es el bloque contenedor de referencia para evitar que nuestro elemento quede fuera de la pantalla.
fixed: En este caso el elemento de referencia es siempre la ventana del navegador, por lo que sería la posición más cercana a lo que podríamos interpretar como absoluto. Los elementos que llevan esta posicion salen del flujo y se mantienen fijos en la ventana, pero aún mantienen una relación de profundidad con el resto de los elementos: mientras no hayamos alterado el valor z-index, los elementos que se han creado antes del posicionado se encontrarán por debajo de él, mientras que los que se crean después se superpondrán al elemento posicionado en el caso de que tengan que coincidir al desplazar la página.

Como consecuencia de lo anterior, si queremos crear un menú que permanezca fijo en la parte superior de la pantalla y creamos el elemento que lo contiene en primer lugar tendremos que modificar su valor z-index poniéndolo mayor que cualquier otro en el resto de la página.