position

Sumario

La propiedad de CSS position ofrece reglas alternativas para el posicionamiento de elementos, ha sido diseñada para los efectos de animación con secuencias de comandos

• Valor inicial: static
• Aplicable a: todos los elementos
• Heredable: no
• Media: visual
• Valor calculado: como se especifica

Un elemento posicionado es un elemento en el que la propiedad de position es computed ya sea como relative, absolute, fixed o sticky.

Un elemento posicionado relativamente es un elemento cuya propiedad de posición calculada es relativa (relative) al elemento que la contiene.

Un elemento posicionado absolutamente es un elemento en el que la propiedad de posición computed es absolute o fixed.

Las propiedades top, right, bottom, y left especifican la posición que toma el elemento.

Sintaxis

/* Keyword values */
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

/* Global values */
position: inherit;
position: initial;
position: unset;

Valores

static 

Esta palabra reservada permite que el elemento utilice el comportamiento normal. Las propiedades top, right, bottom, left and z-index no se aplican.

relative 

Dispone todos los elementos como si el elemento no tuviera posición y luego ajusta la posición del elemento sin alterar la disposición (por tanto dejando un vacío donde debería estar el elemento si no estuviera posicionado).

absolute 

No deja espacio para el elemento. En su lugar, lo posiciona en unas coordenadas determinadas relativas a la posición más cercana de su elemento padre o del bloque contenedor inicial.

fixed 

No deja espacio para el elemento. En su lugar, lo posiciona en unas coordenadas determinadas relativas a la ventana de visualización, que no se mueve al moverse la página. (O cuando se imprime, la posición es fija en cada página ).

sticky 

La posición de la caja se calcula de acuerdo con el flujo normal.

Ejemplos

Notas

Para los elementos con positionrelative , las propiedades top ó bottom especifican la separación vertical desde la posición normal y las propiedades left ó right especifican la separación horizontal.

Para los elementos con positionabsolute , las propiedades top, right, bottom, y left especifican la separación desde los bordes del elemento bloque contenedor (aquel al que el elemento es relativamente posicionado). El margen del elemento es contado a partir de ese desplazamiento.

En la mayoría de los casos, los elementos con posición absolute tienen el valor auto en las propiedades height y width para albergar el contenido del elemento. Sin embargo, los elementos posicionados absolute pueden llegar a llenar el espacio disponible especificando (en lugar de auto) tanto top como bottom y dejando height sin especificar (esto es, auto). Igualmente para left, right, y width.

Excepto para el caso anteriormente descrito de elementos posicionados absolute que llenan todo el espacio:

• Si se especifican tanto top como bottom (técnicamente, no auto), top tiene preferencia.
• Si se especifican tanto left como right, left tiene preferencia cuando direction es ltr (Inglés, Japonés horizontal, Español, etc.) y tiene preferencia right cuando direction es rtl (Árabe, Hebreo, etc.).

Especificaciones

• CSS 2.1

Compatibilidad en navegadores

Ver también

display, float, top, right, bottom, left