La propiedad
positionespecifica el tipo de método de posicionamiento utilizado para un elemento (static,relative,fixed,absoluteosticky).
La propiedad position
La propiedad position especifica el tipo de método de posicionamiento utilizado para un elemento.
Hay cinco diferentes valores de position:
staticrelativefixedabsolutesticky
Los elementos se colocan utilizando las propiedades top, bottom, left y right. Sin embargo, estas propiedades no funcionarán a menos que la propiedad position se establezca primero. También funcionan de manera diferente según el valor de la posición.
Posición static
Por defecto, los elementos HTML se posicionan de forma estática.
Los elementos con position: static; no se ven afectados por las propiedades top, bottom, left y right.
Un elemento con position: static; no está posicionado de ninguna manera especial; siempre se posiciona de acuerdo con el flujo normal de la página:
Ejemplo:
Posición relative
Un elemento con la propiedad position: relative; está posicionado en relación con su posición normal.
Establecer las propiedades top, bottom, left y right de un elemento con posición relative hará que se ajuste fuera de su posición normal. El resto del contenido no se ajustará para encajar en ningún espacio dejado por el elemento.
Ejemplo:
Posición fixed
Un elemento con position: fixed; se coloca en relación con la ventana gráfica, lo que significa que siempre permanece en el mismo lugar, incluso si se desplaza la página. Las propiedades top, bottom, left y right se utilizan para colocar el elemento.
Un elemento fijo no deja un espacio en la página donde normalmente habría estado ubicado.
Ejemplo:
Posición absolute
Un elemento con position: absolute; se coloca en relación con el elemento posicionado más cercano (en lugar de posicionarse en relación con el viewport, como fixed).
Sin embargo; si un elemento con position: absolute; no tiene ancestros con position, utiliza el elemento <body> del documento y se mueve junto con el desplazamiento de la página.
Ejemplo:
Posición sticky
Un elemento con position: sticky; se posiciona en función de la posición de desplazamiento del usuario.
Un elemento fijo alterna entre relative y fixed, dependiendo de la posición de desplazamiento. Se coloca en relative hasta que se alcanza una posición de desplazamiento determinada en la ventana gráfica; luego, cambia a sticky en su lugar (como position: fixed;).
Nota: Internet Explorer no admite el posicionamiento fijo. Safari requiere un prefijo
-webkit-(ver ejemplo a continuación). También debe especificar al menostop,bottom,leftyrightpara que funcione el posicionamiento fijo.
En este ejemplo, el elemento sticky se adhiere a la parte superior de la página (top: 0), cuando llega a su posición de desplazamiento.
Ejemplo:
Posicionamiento de texto en una imagen
¿Cómo colocar texto sobre una imagen?
top: left;top: right;bottom: left;bottom: right;centered;
Ejemplo:
Todas las propiedades
| Propiedad | Descripción |
bottom | Establece el borde del margen inferior para un cuadro posicionado. |
clip | Recorta un elemento absolutamente posicionado. |
left | Establece el borde del margen izquierdo para un cuadro posicionado. |
position | Especifica el tipo de posicionamiento para un elemento. |
right | Establece el borde del margen derecho para un cuadro posicionado. |
top | Establece el borde del margen superior para un cuadro posicionado. |
Resumen
La propiedad position especifica el método de posicionamiento utilizado para un elemento. Hay cinco valores: static, relative, fixed, absolute y sticky. Los elementos se colocan utilizando top, bottom, left y right. Los elementos con position: static no se ven afectados por estas propiedades. relative ajusta el elemento fuera de su posición normal. fixed se coloca en relación con la ventana gráfica y no deja un espacio. absolute se coloca en relación con el elemento posicionado más cercano. sticky se posiciona en función de la posición de desplazamiento del usuario. También se puede posicionar texto sobre una imagen.
Traducido con 💚 desde W3Schools.com