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 posición computed es relative, absolute, o fixed.

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

Un elemento absolutamente posicionado 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

position: static | relative | absolute | fixed | inherit

Valores

static 

Comportamiento normal.

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 seberí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 c ada página ).

Ejemplos

Notas

Para los elementos con position relative , 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 position absolute , 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 elemento 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