El NO misterio de posición absoluta

Cuando diseñamos una página web o simplemente agregamos etiquetas, estas se acomodan de manera natural, ya sea una al lado de la otra o bien una debajo de la otra, dependiendo del tipo que sean. El contenido fluye naturalmente, de arriba hacia abajo y de izquierda a derecha, tal como ocurre cuando escribimos o leemos.

Para modificar esa secuencia usamos distintas propiedades de CSS; les colocamos márgenes, cambiamos su tipo con display o las hacemos flotar.

De un tiempo a esta parte, se está empleando una nueva forma de posicionar "cosas" en la página, utilizando para ello la propiedad respectiva que se llama position y, que como toda propiedad de CSS, tiene un valor por defecto aunque no la definamos. Toda etiqueta tiene el valor static que no hace nada salvo decirle al navegador que esa etiqueta es "normal".

Las variantes que admite esa propiedad son tres: fixed, relative y absolute. Justamente, el uso de esta última es la que últimamente se está extendiendo porque es una forma bastante sencilla de ubicar elementos con cierta precisión pero, se suele ver que se usa de manera extraña o mejor dicho, sin tener en cuenta qué es o que hace y por lo tanto, cómo afecta al resto de las etiquetas.

Lo primero que debe tenerse en claro es que ´lo absoluto no existe y que toda posición absoluta es relativa a algo; ¿a qué? a la etiqueta que la contiene, sea la que sea ya que una página web no es otra cosa que un montón de etiquetas contenidas en otras etiquetas hasta llegar a la primera que es el body.

De este modo, si colocamos position:absolute; en una etiqueta cualquiera, el navegador la posicionará buscando "hacia atrás" la primera etiqueta que no tenga la propiedad position:static; y si no hay ninguna, tomará como referencia el body, es decir, la esquina superior izquierda de la ventana.

Este es el error más común, suponer que si algo tiene una posición absoluta, el navegador entenderá dónde queremos que se vea pero, los navegadores no piensan, sólo obedecen ordenes.

Tampoco es cierto que agregando esa propiedad, todo se resuelva porque por si sola no causa mayor efecto; en este ejemplo, el contenedor es "normal" y el contenido es absoluto y sin embargo, todo se muestra como si esta no existiera, el rectángulo se ve debajo el texto:

#contenedor {position:static;}

#contenido {position:absolute;}

Para que tenga algún efecto, debemos establecer también algunas de las propiedades que definen esa posición (left, top, right, bottom) ya que si no lo hacemos, esas propiedades son calculadas automáticamente; en el ejemplo anterior, el navegador me dice que left: es 67 y top es 414 aunque yo no lo haya escrito; si le digo que los coloque en cero, el rectángulo se moverá hasta colocarse en el ángulo superior izquierdo del primer contenedor que no tenga la propiedad position:static (que sea relative, absolute o fixed) que en el caso de esta entrada, es el DIV #main-wrapper:

click para probar

Justamente, el poder usar left, top, right y bottom para ubicar algo, es lo que hace de esta propiedad una forma sencilla de diseñar algo pero, si podemos posicionar un objeto de ese modo ¿para que agregar otras propiedades como margin y float?

Esto también es bastante común y debería evitarse. Si posicionamos algo de modo absoluto, los márgenes suelen ser innecesarios y las flotaciones, inútiles; esto:

#contenido {
  float: right;
  margin-right: 20px;
  right: 20px;
  top: 40px;
}

se puede simplificar y la regla sólo debería decir:

#contenido {
  right: 20px;
  top: 40px;
}

Veremos lo mismo asi que ¿para qué complicarse la vida?

Lo mismo puede decirse se display; salvo muy raras excepciones, es innecesario agregar esa propiedad en la regla.

Por supuesto, como la posición es absoluta, margin: 0 auto; no centra absolutamente nada; mucho menos lo hará text-align o el viejo atributo align. Si queremos centrar algo que tenga este tipo de propiedad, debemos conocer su ancho. Por ejemplo, en este caso, el rectángulo celeste tiene 200 pixeles de ancho y lo centramos usando left y un margen izquierdo negativo:

#contenido {
  left: 50%;
  margin-left: -100px;
  margin-top: -60px;
  position: absolute;
  top: 50%;
}

Y con top lo podemos centrar verticalmente así que si el contenido es de 200x120, esto, lo centraría en ambos sentidos:

#contenido {
  left: 50%;
  margin-left: -100px;
  margin-top: -60px;
  position: absolute;
  top: 50%;
}

click para probar