posicionamiento-css

La propiedad position, como su nombre indica, sirve para establecer la posición de un elemento. Su valor por defecto es static (sin posición). Es soportada en todos los navegadores (Cabe destacar que en todas las versiones de IE, incluyendo la 8, no soporta el valor inherit). A continuación mostraremos un ejemplo, los valores de la propiedad, los distintos tipos de posicionamiento que hay explicados con un ejemplo, y todas las propiedades CSS de posicionamiento:

Ejemplo

Un ejemplo (posicionar un encabezado con el valor absolute, dando posiciones absolutas):

Select Code
h1
{
position:absolute;
left:80px;
top:120px;
}


Valores de la propiedad

ValorDescripción
absoluteGenera un elemento absolutamente posicionado, posicionado relativamente al primer elemento padre que tiene otra posición que no es estático. Las posiciones del elemento están especificadas con “left”, “top”, “right” y “bottom”. Recordemos que si utilizamos este valor, la posición del elemento no será relativa a la ventana del navegador.
fixedGenera un elemento absolutamente posicionado, posicionado relativamente a la ventana del navegador. Las posiciones del elemento están especificadas con “left”, “top”, “right” y “bottom”.
relativeGenera un elemento relativamente posicionado, posicionado relativamenta a su posición normal, así que “right: 10″ añade 10 píxeles a la posición derecha del elemento.
staticPor defecto. Sin posición, el elemento se encuentra en un flujo normal (ignora top, bottom, left, right o z-index).
inheritEspecifica que el valor de la posición debe ser heredado del elemento padre.

Ejemplos de posicionamiento

Posicionamiento Estático

El posicionamiento estático no es afectado por los valores top, bottom, left, right, o la declaración z-index. Al estar por defecto, no se incluyen ejemplos.

Posicionamiento Fixed

Select Code
p.fixed
{
position:fixed;
top:10px;
right:15px;
}

Posicionamiento Relativo

Select Code
h1.izquierda
{
position:relative;
left:-10px;
}


Select Code
h1.derecha
{
position:relative;
left:10px;
}


El contenido de los elementos en posición relativa se puede mover y se superponen otros elementos, pero el espacio reservado sigue presente en el flujo normal.

Select Code
h2.top
{
position:relative;
top:-30px;
}


Los elementos relativos son usados habitualmente como bloques contenedores para elementos con posición absoluta.

Posicionamiento Absoluto

Los elementos absolutos pueden superponer a otros elementos.

Select Code
h1
{
position:absolute;
left:100px;
top:150px;
}

Elementos superpuestos

Cuando los elementos están posicionados fuera del flujo normal, pueden superponer a otros elementos.

La propiedad z-index especifica el orden de superposición de un elemento (si el elemento se colocará detrás o encima de otro).

Un elemento puede tener orden de superposición negativa o positiva:

Select Code
div.sol
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

Todas las propiedades CSS de posicionamiento

El número en la columna “CSS” identifica en cuál versión de CSS es definida la propiedad.

PropiedadDescripciónValoresCSS
bottomFija el borde del margen inferior para un contenedor posicionado.auto
length
%
inherit
2
clipAcorta un elemento absolutamente posicionado.shape
auto
inherit
2
cursorEspecifica el tipo de cursor que será mostrado.url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
2
leftFija el borde del margen izquierdo para un contenedor posicionado.auto
length
%
inherit
2
overflowEspecifica lo que ocurrirá si el contenido desborda el contenedor de un elemento.auto
hidden
scroll
visible
inherit
2
positionEspecifica el tipo de posicionamiento de un elemento.absolute
fixed
relative
static
inherit
2
rightFija el borde del margen derecho para un contenedor posicionado.auto
length
%
inherit
2
topFija el borde del margen superior para un contenedor posicionado.auto
length
%
inherit
2
z-indexDefine el orden de superposición de un elemento.number
auto
inherit
2

Si deseáis ver más guías básicas sobre las distintas propiedades que existen en CSS, echad un vistazo a la categoría CSS Básico.

Si te ha gustado este artículo, puedes recibir gratis más y mejor por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!