El atributo position: posicionamiento con css, los difrentes tipos y su uso

Vamos a explicar como posicionar un elemento html utilizando el atributo position de css y sus diferentes tipos. Aunque hay otros atributos para conseguir el posicionamiento exacto deseado, el atributo position es de los más importante. Los diferentes valores del atributo position son: static, absolute, relative, fixed y inherit. Veamos cada uno de los valores con sus propiedades y qué podemos hacer con ellos.

Al final del artículo dejaré un enlace para descargar los archivos con los ejemplos.

Position: static

Este es el valor por defecto y posiciona el elemento según el flujo normal del HTML. Por tanto, el valor static no será necesario ponerlo (salvo casos excepcionales en que necesitemos poner position:static para un elemento que haya heredado un valor diferente). Las capas con posicionamiento static no admiten valores de posicionamiento top, left, bottom y right. En el siguiente ejemplo se puede ver como poner el valor static o no ponerlo no causa ningún efecto pues es el posicionamiento según el flujo normal del HTML:

<h1>Posicionamiento normal (static)</h1>
<div style="position:static;background-color:#333;color:#FFF;width:300px;margin:10px;">
   Capa con posicionamiento static
</div>
<h2>Otra capa static:</h2>
<div style="background-color:#888;color:#FFF;width:300px;margin:10px;">
   Esta capa también tiene posicionamiento static aunque no se haya<br/>
   especificado pues es el valor por defecto.
</div>

Position: absolute

El valor absolute del atributo position provoca el posicionamiento del elemento de forma absoluta. jijiji...vaya sorpresa, no? El posicionamiento absolute no quiere decir más que el posicionamiento según las distancias especificadas a través de los atributos top, left, right y bottom. Estas distancias se miden respecto al primer elemento padre cuyo valor position sea diferente de static. En el supuesto de que todos los elementos superiores tengan position: static;, las distancias harán referencia a los bordes de la página (del espacio disponible en el navegador para mostrar la página). El posicionamiento absolute hace que el elemento quede fuera del flujo normal de la página, su posición no se verá afectada por la posición de otros elementos, ni afectará a la posición de otros elementos. Al utilizar posición absoluta puede que varios elementos coincidan en la misma posición, apareceriendo unos por encima de otros, habrá que utilizar z-index para especificar que elemento queramos que quede por encima y cuál por debajo (recuerda que z-index sólo tendrá efecto sobre los elementos que tengan el atributo position declarado).

Ejemplo:

<div style="position:absolute;background-color: #888;bottom: 120px;right: 50px;color: #FFF;height: 100px;margin: 10px;width: 300px;">
   Capa con posicionamiento absolute. bottom y right me permite posicionarla respecto a la esquina inferior derecha.
</div>
<div style="position:absolute;left: 50px;top: 60px;background-color: #f6f6f6;color: #ccc;height: 50px;margin: 10px;position: absolute;width: 600px;z-index:0;">
    Capa con posicionamiento absolute y se verá bajo otras capas con z-index mayores.
</div>
<div style="position:absolute;left: 50px;top: 60px;background-color: #333;color: #FFF;height: 70px;margin: 10px;position: absolute;width: 300px;z-index:1;">
    Capa con posicionamiento absolute. top y left la posiciona respecto a la esquina superior izquierda.
</div>
<h1>Posicionamiento absoluto</h1>

Nota como en el ejemplo anterior el flujo normal se rompe. Fíjate también en el uso de z-index para especificar la posición de las capas cuándo queden en la misma posición. (descarga el ejemplo al final del artículo).

Como dijimos, el posicionamiento absolute se realiza respecto al primer elemento padre con position diferente de static hasta llegar a body, por tanto, si ponemos un elemento con position: absolute; y dentro otros elementos también con posicionamiento absolute, las distancias se tomarán respecto a los límtes del primer elemento. Vea el siguiente ejemplo:

<div style="position: absolute; top: 100px; left: 200px; background-color: #ccc; width: 600px; height: 150px;">
  <div style="position: absolute; top: 10px; left:10px;">
   Una capa absolute
 </div>
 <div style="position: absolute; top: 30px; left:150px;">
  Otra capa absolute
 </div>
 <div style="position: absolute; top: 50px; left:300px;">
  Otra capa absolute
 </div>
</div>

Position: relative

El posicionamiento relativo indica que la posición queda dentro del flujo normal del HTML pero que admite valores de top, left, right y bottom. Nota la diferencia con el posicionamiento estático (position: static;) que no admitía los atributos top, left, right ni bottom.

Al ser posicionamiento relativo y quedar dentro del flujo normal HTML, la posición es respecto respecto al flujo pero podemos hacer que aparezca desplazada con los atributos top, left, bottom o right, respecto a los elementos adyacentes.

Ejemplo:

<h1>Un título h1</h1>
<div style="width:300px;height:200px;background-color:#000;color:#FFF;">
  La primera capa. Static.
</div>
<div style="position:relative;top:100px;left:40px;width:300px;height;200px;background-color:#000;color:#FFF;">
  Segunda capa. Relative.
</div>
<h2>Un título h2</h2>

En el ejemplo anterior la primera capa es static (no hemos puesto ningún valor a position) y la segunda tiene posicionamiento relativo. Por tanto, el segundo div se posiciona siguiendo el flujo normal del HTML aunque aparece desplazada según los valores que hemos puesto de top y left. Como se ha posicionado según el flujo normal, el elemento h2, respetando este flujo, deja el espacio de la posición "real" del div con position: relative;. Más ilustrativo será si los ves en acción, descarga el código de ejemplo al final del artículo ;).

Position: fixed

El posicionamiento fixed (fijo) hace que podamos "fijar" la posición "absolute" del elemento, es decir, se usa igual que el posicionamiento absoluto pero la posición quedará fijada y será siempre visible aunque utilicemos las barras de desplazamiento de la página, esto es con posición fija.

Por ejemplo (he puesto varios br y p para que se cree desplazamiento y puedas ver el efecto):

<h1>Position: relative</h1>
<div style="position: fixed; width: 100px; background-color: #ccc;bottom: 10px; right: 10px;">
   Esta capa también tienen posicionamiento fixed con uso de bottom y right para posicionarla respecto a la esquina inferior derecha.
</div>
<div style="position: fixed; width: 400px; height: 100px; background-color: #000; color:#FFF;top: 100px; left: 30px;z-index:1;">
   Capa con posicionamiento fixed
</div>
<div style="position: fixed; width: 700px; height: 50px; background-color: #ccc; top: 100px; left: 150px;z-index:0;">
   Esta capa también tienen posicionamiento fijo y z-index menor.
</div>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
   Por aquí...
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
  puede el contenido de la página
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
  como un párrafo o una imagen
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
  que quedará con flujo normal
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
   ...... etc
 <br/>
 <br/>

Position: inherit

Con el valor inherit indicamos que la posición del elemento tome el valor del elemento padre. Como en muchos de los atributos css, el valor inherit en IE no es muy bien soportado. En el caso de position, el valor inherit solo funciona en IE 8 y superiores siempre que en el html se haya declarado un DOCTYPE!.

En general, para maquetación de páginas se usa posicionamiento static quedando los otros valores del atributo position para diseños complejos. El uso de posicionamiento absoluto es muy usado para crear efectos con javascript.

DESCARGA LOS ARCHIVOS DE EJEMPLO ..... para verlo en acción ;D