Tipos de posicionamiento con el atributo position de CSS

  • Por
Explicamos los distintos valores que puede tener el atributo position de CSS, con detalle.
En lo que se conoce como posicionamiento CSS, el atributo de hojas de estilo en cascada que más importancia tiene es el position. Vamos a dedicar todo el presente artículo a explicar los distintos valores de position, para explicarlos y proponer unos ejemplos que esperamos acaben de aclarar los posibles valores que puede tomar.

Recordemos que en el artículo anterior de este manual de CSS ya se introdujo el concepto de posicionamiento CSS y se vio un listado de los atributos existentes hasta CSS 2 para realizar posicionar elementos en la página. Pasemos entonces al tema en cuestión, viendo las posibilidades que nos ofrece este lenguaje. Además, a lo largo de este artículo de DesarrolloWeb.com, vamos a mencionar repetidas veces un concepto que también se explicó anteriormente: el flujo del HTML normal.

position: static

Es el valor predeterminado del atributo y el posicionamiento normal de los elementos en la página. Quiere decir que los elementos se colocarán según el flujo normal del HTML, es decir, según estén escritos en el propio código HTML. Por decirlo de otra manera, static no provoca ningún posicionamiento especial de los elementos y por tanto, los atributos top, left, right y bottom no se tendrán en cuenta.

Podemos ver un ejemplo de posicionamiento static:

<div style="position: static; background-color: #ff9; padding: 10px; width: 300px;">Esto es una capa con posicionamiento estático</div>
<div style="position: static; background-color: #f9f; padding: 10px; width: 500px;">posicionamiento static, predeterminado.</div>
<h1>CSS</h1>
<div style="background-color: #9ff; padding: 10px; width: 400px;">Posicionamiento static, aunque en este caso no se indicó el atributo position static, pues no hace falta.</div>

Puede verse en una página aparte.

position: absolute

El valor absolute en el atributo position permite posicionar elementos de manera absoluta, esto es de manera definida por valores de los atributos top, left, bottom y right, que indican la distancia con respecto a un punto. Las capas o elementos con posicionamiento absoluto quedan aparte del flujo normal del HTML, quiere decir esto que no se afectan por el lugar donde aparezcan en el código HTML y tampoco afectan ellas a otros elementos que sí que formen parte del flujo normal del HTML.

Los valores top, left, bottom y right se expresan con unidades CSS y son una distancia con respecto al primer elemento contenedor que tenga un valor de position distinto de static. Si todos los contenedores donde esté la capa posicionada con position absolute (todos sus padres hasta llegar a BODY) son static, simplemente se posiciona con respecto al lado superior de la página, para el caso de top, el inferior para bottom, del lado izquierdo para left o el derecho, en el caso de utilizar right.

Veamos el siguiente código HTML en el que hemos preparado varias capas con position absolute, pero con distintas características:

<div style="position: absolute; width: 300px; height: 140px; top: 100px; left: 30px; background-color: #ff8800; color: #fff; padding: 15px;z-index: 2;">
Esta capa tiene posicionamiento absoluto.
<br>
<br>
Me permite especificar top y left para colocarla con respecto a la esquina superior izquierda.
</div>

<div style="position: absolute; width: 820px; height: 30px; padding: 10px; background-color: #ddf; top: 150px; left: 10px; z-index: 1;">Posicionamiento absoluto con z-index menor (la capa aparece por debajo de otras que se superponen con z-index mayor.</div>

<div style="position: absolute; width: 100px; height: 20px; padding: 10px; background-color: #ddf; bottom: 10px; right: 10px;">Posicionamiento absoluto con atributos bottom y right</div>

<h1>Posicionamiento CSS</h1>

Podemos ver el ejemplo en una página aparte.

La primera capa (llamamos así a los elementos DIV que tienen posicionamiento CSS), tiene como todas las del ejemplo, posicionamiento absoluto. Los atributos top: 100px y left: 30px quieren decir que se posiciona a 100 píxeles de la parte superior de la página y a 30 píxeles de la izquerda. En este caso las distancias top y left para ubicar la capa con position absolute son relativas a la esquina superior izquierda del área disponible del navegador, pues esta capa no está dentro de ninguna otra con posicionamiento distinto de static. Cabe llamar la atención en esta primera capa también sobre el atributo z-index: 2, que servirá para indicarle al navegador la posición de la capa, en la tercera dimensión, con respecto a otras que se puedan superponer, para que sepa cuál tiene que estar debajo y cuál arriba.

La segunda capa podemos ver que tiene un z-index:1. Eso quiere decir, que en caso se posicione en el mismo lugar se ocultará por la capa primera, que tiene un z-index mayor.

En la tercera capa hemos probado el posicionamiento utilizando los atributos bottom y right, así que la estamos posicionando con respecto a la esquina inferior derecha.

Veamos un segundo ejemplo donde vamos a colocar una capa con posicionamiento absoluto y dentro varias capas también posicionadas con absolute.

<div style="position: absolute; top: 100px; left: 200px; background-color: #ff9966; width: 400px; height: 100px;">
<div style="position: absolute; top: 10px; left:10px;">
Uno
</div>
<div style="position: absolute; top: 10px; left:100px;">
Dos
</div>
<div style="position: absolute; top: 10px; left:200px;">
Tres
</div>
</div>

En este caso la primera capa, que no está dentro de ninguna otra, se posiciona con top y left con respecto a la esquina superior izquierda del espacio disponible en el navegador para el cuerpo de la página. Las capas anidadas están también con position: absolute, pero al estar dentro de otra capa que tiene posicionamiento distinto de static, sus valores top y left son relativos a la esquina superior izquierda de la capa que las contiene.

Podemos ver el ejemplo en marcha en una página aparte.

position: relative

El valor relative en el atributo position indica que la capa sí forma parte del flujo normal de elementos de la página, por lo que su posición dependerá del lugar donde esté en el código y el flujo HTML. Además, las capas con posicionamiento relative, admiten los valores top y left para definir la distancia a la que se colocan con respecto al punto donde esté en ese momento el flujo normal del HTML. Como afectan al mencionado flujo del HTML, los elementos colocados después de las capas relative, tendrán en cuenta sus dimensiones para continuar el flujo y saber dónde colocarse. Sin embargo, no se tendrá en cuenta los top y left configurados.

Veamos un ejemplo que quizás aclare las cosas.

<h1>Hola</h1>
<div style="background-color: #606; color:#ffc; padding:10px; text-align: center; width: 300px;">Hola esto es una prueba</div>
<div style="position: relative; width: 300px; padding: 10px; background-color: #066; color:#ffc; top:100px; left: 30px;">capa de posicionamiento relative<br>Se tiene en cuenta esta capa para posicionar las siguientes.</div>
<h2>hola de nuevo!</h2>

Podemos ver la página en marcha.

Las etiquetas H1 y H2 respetan el flujo HTML y también tenemos un elemento DIV donde no se ha especificado nada en position, luego es static y por tanto también es afectada por el flujo. Hay una capa relative, en el segundo elemento DIV, que también se posiciona con respecto al flujo normal. Como tiene un top y left, aparece un poco desplazada del lugar que le tocaría con respecto al flujo.
El último H2 que aparece se coloca teniendo en cuenta al flujo y tiene en cuenta la capa relative, por eso deja un espacio en blanco arriba, pero no atiende a la posición real de ésta, que se marcó con los atributos top y left.

position: fixed

Este atributo sirve para posicionar una capa con posicionamiento absoluto, pero su posición final será siempre fija, es decir, aunque se desplace el documento con las barras de desplazamiento del navegador, siempre aparecerá en la misma posición.

El lugar donde se "anclará" la capa siempre es relativo al cuerpo (el espacio disponible del navegador para la página). Si utilizamos top y left, estaremos marcando su posición con respecto a la esquina superior izquierda y si utilizamos bottom y right su posición será relativa a la esquina inferior derecha.

Veamos un ejemplo.

<div style="position: fixed; width: 300px; height: 140px; top: 100px; left: 30px; background-color: #ff8800; color: #fff; padding: 15px;z-index: 1;">
Esta capa tiene posicionamiento fixed.
<br>
<br>
Me permite especificar top y left para colocarla con respecto a la esquina superior izquierda.
</div>

<div style="position: fixed; width: 700px; height: 30px; padding: 10px; background-color: #d0f; top: 150px; left: 10px; z-index: 2;">Posicionamiento fixed</div>
<h1>Hola</h1>
<div style="position: fixed; width: 100px; height: 30px; padding: 10px; background-color: #0df; bottom: 10px; right: 10px; z-index: 4;">Posicionamiento fixed</div>
<br>
<br>
<br>
<br>
Pongo texto para que se vea!!
<br>
<br>
<br>
Esto hace desplazamiento, con tanto br
<br>
<br>
...
<br>

Se puede ver la página en marcha con este código.

Se puede ver que hay varias capas con position: fixed y un montón de BR para que la página pueda tener un desplazamiento. Si vemos la página en marcha y hacemos scroll hacia abajo con la barra de desplazamiento, veremos que las capas fixed siempre mantienen la misma posición.

Nota: El valor fixed en el atributo position funciona en todos los navegadores, pero en el caso de Internet Explorer sólo funciona en la versión 7 y superiores. Además, para que funcione en Explorer tiene que declararse un DOCTYPE!. Servirían varios tipos de DOCTYPE!, sin embargo debería declararse con el formato completo. Algo así como:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

O por poner otro ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

position: inherit

El valor inherit indica que el valor de position tiene que heredarse del elemento padre. No funciona en Explorer, al menos hasta la versión 8. Tiene en verdad poca utilidad y además, como no funciona en el navegador más utilizado en la actualidad, tiene aun menos sentido usarlo. Por ello, no ponemos ejemplos.

Conclusión sobre el atributo position de CSS

Esperemos que con las anteriores explicaciones y ejemplos se hayan podido entender bien las distintas posibilidades del atributo position, que es sin duda clave para el posicionamiento CSS. Lo más común para la maquetación web es utilizar el posicionamiento static, pero el posicionamiento absoluto, junto con el posicionamiento fixed, e incluso relative, pueden ser muy útiles para diseños más complejos, donde se requiera una mayor precisión en la colocación de los distintos elementos o las capas.

Además, para hacer efectos Javascript y DHTML en general, se utilizan frecuentemente posicionamientos absolutos. Son muy útiles porque permite que los elementos dinámicos no formen parte del flujo normal del HTML, y por tanto, podemos situarlos en cualquier lugar el área disponible del navegador, e incluso moverlos dinámicamente al cambiar sus propiedades top y left mediante scripts en el lado del cliente. Todos estos comportamientos dinámicos quedan ya fuera de la temática de este texto, aunque los explicamos con detalle en distintos manuales de la sección Javascript a Fondo, de DesarrolloWeb.com.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Miguel Flores

21/11/2011
Separa presentación de contenido
EL CSS no se debe de mezclar copn el HTML por principio, entonces debesde mostrar como separar la presentación (CSS) del contenido (HTML) para dar un ejemplo mpas veráz.

Gracias

Tarzán

12/4/2012
Gracias por el artículo
En mi caso, yo quiero centrar horizontalmente una web, y me interesa usar capas con posición absoluta porque los diseños los preparo con Photoshop.

Vi la solución que apuntaba Peladiguis en http://www.saltarintro.com/wp/2008/05/24/centrar-una-web-vertical-y-horizontalmente-con-css-y-sin-tablas-ni-efectos-secundarios/ y con este artículo, creo que me sirve con lo siguiente, que os comparto por si a alguien más le viene bien:

<style type="text/css">
<!--
#contenedor{
position: relative;
margin:0px auto;
width:700px;
height: 500px;
background-color: #999999;
}
#menu-izda {
position: absolute;
left: 20px;
top: 50px;
width: 150px;
background-color: #99FF33;
}
#textos {
position: absolute;
left: 400px;
top: 70px;
width: 250px;
background-color: #CCCCFF;
}
-->
</style>

La capa "contenedor" es la que contiene todo el resto, y debe tener "position: relative" para que funcione la absoluta de las capas de contenido.
Es decir, las coordenadas left y top de las capas "menu-izda" y "textos" (y todas las demás que necesitáramos) se miden desde el comienzo de la capa "contenedor", y no desde la esquina superior izquierda del navegador.
De este modo, el contenedor siempre está centrado horizontalmente, y las capas que contiene siempre están colocadas respecto a dicho contenedor. La barra de desplazamiento horizonal funciona bien.
Sólo lo he probado con Firefox 11 e Internet Explorer 8 64bits, pero espero que funcione bien en otros navegadores.

Muchas gracias por el artículo; muy clarificador y buenos ejemplos.

Paul

13/5/2012
Felicitaciones
Mejor explicado no puede estar

Raul

13/11/2013
Explicado y entendido
Muchas gracias por los ejemplos y explicaciones, me ha costado trabajo pero al final, pude entender bien.

Gracias.

Ricardo

21/12/2013
Claridad.
Gracias, me sirvio mucho, hay unas funciones que utilizan con porcentajes, sería bueno que complementaras tu articulo con esto.

DPC

04/1/2014
Fixed y resoluciones
Estoy creando una página con un menú fixed a la izquierda. Se ha dado que, en resoluciones inferiores a la que utilizo para diseñar, el menú se "sale" de la pantalla y los usuarios no pueden hacer scroll para ver el resto del menú.

¿Alguna solución para este peregrino frustrado?

Fonsov

16/1/2014
Gracias
Sencillito e ilustrativo. Gracias por el aporte

marina

27/6/2014
ayuda con link
al crear un style fixed, le puse a su vez un link, pero no logro que pueda re direccionar a la dirección deseada, que debo corregir del código?
<div class="web">
<a href="http://www.aaa.com.ar" target="_blank" class="web">AAA</a></div>

.web {
position: fixed;
top: 810px;
right: 26px;
color: #fff;
z-index: 2;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;
height: 12px;
}

Diego

06/11/2014
fixed
Yo he creado un "header" con el atributo fixed pero ando buscando la forma de como cambiar el estilo al comenzarse a desplasar con el scroll pero no se como hacer esto. Si alguien me hecha una mano con esto se lo agradeceria.

Mann

07/12/2014
Menu variable
Diego, con Js, y offsettop te fijas si el usuario escroló, si es si, le cambias el estilo al menú con la nueva versión.