Despejando dudas: La propiedad position

Hay algunos detalles que parecen generar dudas cuando hablamos de superoponer contenidos. Todo el truco (si es que podemos llamarlo truco) es el uso de la propiedad position que es una de las más poderosas que tiene el CSS.

Los valores que son aceptados son varios (y ahora muchos más que antes desde que IE8 comenzó a interpretar algunos de ellos) pero, nos basamos sólo en dos de ellos: relative y absolute.

Veamos un ejemplo normal de un DIV oscuro y otro DIV claro, puestos uno debajo el otro y con alguna propiedad elemental:

<style>
  .recOSCURO { background-color: #666; height: 150px; width:350px; }
  .recCLARO { background-color: #CCC; height: 50px; width: 250px; }
</style>
<div class="recOSCURO">
  <div class="recCLARO"> ....... </div>
</div>

Si no tienen contenido (no textos ni imágenes veríamos esto:

Si a ambos, les agregamos la propiedad position:relative; nada cambiaría, se vería lo mismo.

Como uno está dentro del otro, se dice que el externo (el que tiene el atributo class="recOSCURO") es el contenedor o elemento padre y el que está en el interior, (el que tiene el atributo class="recCLARO") es el contenido o elemento hijo.

Vamos a ponerle al primero la propiedad position:relative; y al segundo la propiedad position:absolute;

Tampoco vemos cambios evidentes pero, han cambiado de manera fundamental. El elemento oscuro (el contenedor) ahora nos sirve de referencia para posicionar el contenido y este, al tener definida su posicion como absoluta, puede ser ubicado de manera precisa dentro del otro. Si no vemos nada distinto es porque aún no le hemos indicado nada.

Para ubicarlo, usamos las propiedades left top right y bottom; todas o algunas de ellas. Estas, indican la distancia en que comenzará a mostrarse ese rectángulo y, al no poner nada aún, se asume que está en top:0px; left:0px; que es la posición por defecto de cualquier elemento; es decir, está en la parte superior izquierda del contenedor.

Vamos a moverlo. usamos el mismo código HTML pero, modificando las propiedades CSS:

.recOSCURO { background-color: #666; height: 150px; width:350px; position:relative; }
.recCLARO {
  background-color: #CCC; height: 50px; width: 250px;
  position: absolute;
  right: 0px; bottom: 0px;
}

Hemos colocado el elemento en el extremo opuesto, en el ángulo inferior derecho.

Ahora, lo pondremos en el centro (hay que hacer algunas operaciones de suma y resta):

.recCLARO {
  .......
  left: 50px; top: 50px;
}

Como esas cuatro propiedades aceptan valores negativos, podemos sacar nuestro rectángulo del contenedor:

.recCLARO {
  .......
  right: -100px; top: 50px;
}

En todos los casos, el DIV contenedor es quien manda. Si, por ejemplo, lo centramos, el elemento interno se ubica igual, tomando como referencia, la posición del contenedor, sea cual sea esta:

¿Que pasa si el contenedor tiene un borde? pués entonces, ese borde no se tiene en cuenta (está por afuera) ¿Que pasa si el contenedor tiene un padding? entonces, esa separación es parte de su tamaño así que la posición top:0px siempre es la superior (sin el borde).

.recOSCURO {
  .......
  border: 5px solid #FFF;
  margin: 0 auto;
  padding: 10px;
}
.recCLARO {
  .......
  border: 5px solid #AAA;
  right: -50px; top: 0px;
}

En resumen.

Para posicionar algo de manera exacta, el contenedor debe ser un bloque que tenga la propiedad position: relative; y el contenido, la propiedad position: absolute;.

Esto, último puede aplicarse a algunos de los elementos contenido o a todos ellos; de esta forma, podemos tener un control completo de cada etiqueta que agreguemos, sean esta imágenes, textos o cualquier otra cosa.

A

B

C