Atributo de posición del estilo

Definición y uso

position Configuración de atributos o retorno del tipo de método de posicionamiento del elemento (estático, relativo, absoluto o fijo).

Por favor, consulte:

Tutoriales de CSS:Posicionamiento CSS

Manual de referencia de CSS:Propiedad position

Ejemplo

Ejemplo 1

Cambiar la posición del elemento <div> de relativa a absoluta:

document.getElementById("myDIV").style.position = "absolute";

Prueba personal

Ejemplo 2

Usar diferentes tipos de alineación：

function myFunction(x)  {
  var whichSelected = x.selectedIndex;
  var posVal = x.options[whichSelected].text;
  var elem = document.getElementById("myDiv");
  elem.style.position = posVal;
}

Prueba personal

Ejemplo 3

Devuelve la posición de alineación del elemento <h2>：

alert(document.getElementById("myH2").style.position);

Prueba personal

Sintaxis

Devolver la propiedad position：

object.style.position

Establecer la propiedad position：

object.style.position = "static|absolute|fixed|relative|sticky|initial|inherit"

Valor de la propiedad

Valor Descripción
static Los elementos se presentan en el orden en que aparecen en el flujo del documento. Predeterminado.
absolute El elemento se ubica en relación con su primer elemento ancestor con posición (no estático).
fixed El elemento se ubica en relación con la ventana del navegador.
relative

El elemento se ubica en relación con su posición normal.

Por lo tanto, "left:20" aumenta la posición lateral del elemento en 20 píxeles.
sticky

El elemento se ubica según la posición de desplazamiento del usuario.

Los elementos adhesivos alternan entre relative y fixed según la posición de desplazamiento.

Es una posición relativa hasta que encuentra la posición desplazada dada en la vista, luego se "adhiere" a la posición adecuada (como position:fixed).

Comentarios：No se admite en IE/Edge 15 o versiones anteriores. Safari comenzó a soportar el prefijo Webkit a partir de la versión 6.1.
initial Establece esta propiedad en su valor predeterminado. Consulte initial。
inherit Hereda esta propiedad de su elemento padre. Consulte inherit。

Detalles técnicos

Valor predeterminado： static
Valor devuelto： Cadena que representa el tipo de posición del elemento.
CSS versión： CSS2

Compatibilidad del navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte