Saltar al contenido

Propiedad de posición CSS

septiembre 25, 2021

Ejemplo

Coloque un elemento

:

h2 {

posición: absoluta;

izquierda: 100px;
superior: 150px;
}

Inténtalo tú mismo »

Más ejemplos de «Pruébelo usted mismo» a continuación.


Definición y uso

los position propiedad especifica el tipo de método de posicionamiento utilizado para un elemento (estático, relativo, absoluto, fijo o fijo).

Valor por defecto: estático
Heredado: no
Animable: no. Leer acerca de animable
Versión: CSS2
Sintaxis de JavaScript: objeto.style.position = «absoluto» Pruébelo

Soporte del navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.

Propiedad
posición 1.0 7.0 1.0 1.0 4.0

Nota: los sticky El valor no es compatible con Internet Explorer o Edge 15 y versiones anteriores.



Sintaxis CSS

posición: estática | absoluta | fija | relativa | pegajosa | inicial | heredar;

Valores de propiedad

Valor Descripción Juegalo
estático Valor por defecto. Los elementos se representan en orden, tal como aparecen en el flujo del documento. Juegalo «
absoluto El elemento está posicionado en relación con su primer elemento ancestro posicionado (no estático) Juegalo «
reparado El elemento está posicionado en relación con la ventana del navegador. Juegalo «
relativo El elemento está posicionado en relación con su posición normal, por lo que «left: 20px» agrega 20 píxeles a la posición IZQUIERDA del elemento. Juegalo «
pegajoso El elemento se posiciona según la posición de desplazamiento del usuario.

Un elemento pegajoso alterna entre relative y fixed, dependiendo de la posición de desplazamiento. Se coloca en una posición relativa hasta que se alcanza una posición de desplazamiento determinada en la ventana gráfica, luego se «pega» en su lugar (como la posición: fija).

Nota: No es compatible con IE / Edge 15 o versiones anteriores. Compatible con Safari desde la versión 6.1 con un prefijo -webkit-.

Intentalo «
inicial Establece esta propiedad en su valor predeterminado. Leer acerca de inicial Juegalo «
heredar Hereda esta propiedad de su elemento padre. Leer acerca de heredar

Más ejemplos

Ejemplo

Cómo colocar un elemento en relación con su posición normal:

h2.pos_left {
posición: relativa;
izquierda: -20px;
}

h2.pos_right {
posición: relativa;
izquierda: 20px;
}

Inténtalo tú mismo »

Ejemplo

Más posicionamiento:

# parent1 {
posición: estática;
borde: 1px azul sólido;
ancho: 300px;

altura: 100px;
}

# child1 {
posición: absoluta;
borde: 1px rojo sólido;

arriba: 70px;
derecha: 15px;
}

# parent2 {

posición: relativa;
borde: 1px azul sólido;

ancho: 300px;
altura: 100px;
}

# child2 {
posición: absoluta;
borde: 1px rojo sólido;
arriba: 70px;
derecha: 15px;
}

Inténtalo tú mismo »


páginas relacionadas

Tutorial CSS: posicionamiento CSS

Referencia HTML DOM: propiedad de posición

close