Atributo CSS position

Definición y uso

La propiedad 'position' define el tipo de alineación del elemento.

Descripción

Esta propiedad define el mecanismo de ubicación utilizado para establecer el diseño del elemento. Cualquier elemento puede estar ubicado, aunque los elementos absolutos o fijos generan un cuadro de bloque, independientemente del tipo del elemento. Los elementos de ubicación relativa se desplazan en relación con su posición normal en el flujo.

Véase también:

Tutoriales CSS:Ubicación CSS

Manual de referencia del DOM HTML:Atributo de ubicación

Ejemplo

Ubicar el elemento h2:

h2
  {
  position:absolute;
  left:100px;
  top:150px;
  }

Prueba tú mismo

Sintaxis de CSS

position: static|absolute|fixed|relative|sticky|initial|inherit;

Valor del atributo

Valor Descripción
absolute

Genera un elemento de ubicación absoluta, ubicado en relación con el primer elemento padre que no sea de ubicación estática.

La ubicación del elemento se define mediante las propiedades "left", "top", "right" y "bottom".
fixed

Genera un elemento de ubicación absoluta, ubicado en relación con la ventana del navegador.

La ubicación del elemento se define mediante las propiedades "left", "top", "right" y "bottom".
relative

Genera un elemento de ubicación relativa, ubicado en relación con su posición normal.

Por lo tanto, "left:20" añade 20 píxeles a la posición LEFT del elemento.
static Valor predeterminado. Sin ubicación, el elemento aparece en el flujo normal (ignorar las declaraciones de top, bottom, left, right o z-index).
inherit Se debe heredar el valor de la propiedad position del elemento padre.

Detalles técnicos

Valor predeterminado: static
Herencia: no
Versión: CSS2
Sintaxis de JavaScript: object.style.position="absolute"

TIY Ejemplo

Ubicación: Ubicación relativa
Este ejemplo muestra cómo ubicar el elemento en relación con su posición normal.
Ubicación: Ubicación absoluta
Este ejemplo muestra cómo usar valores absolutos para ubicar el elemento.
Ubicación: Ubicación fija
Este ejemplo muestra cómo ubicar el elemento en relación con la ventana del navegador.
Establecer la forma del elemento
Este ejemplo muestra cómo establecer la forma del elemento. Este elemento se recorta dentro de esta forma y se muestra.
Z-index
Z-index se puede usar para ubicar un elemento después de otro.
Z-index
El elemento en el ejemplo anterior ha cambiado el Z-index.

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente la propiedad.

Chrome IE / Edge Firefox Safari Opera
1.0 7.0 1.0 1.0 4.0