La propiedad position de CSS nos permite controlar la posición de un elemento respecto al resto de elementos de una página, los que permite a los desarrolladores hacer diseños más complejos y adaptativos. Con esta propiedad se puede modificar el flujo HTML de una web y posicionar elementos de forma relativa, absoluta, fija o pegajosa, abriendo un amplio abanico de posibilidades en el diseño de la web.
A medida que CSS ha evolucionado, se han agregado diferentes valores y características relacionadas con la propiedad position para posibilitar más flexibilidad y control sobre cómo se posicionan los elementos. Actualmente esta propiedad acepta los siguientes valores:
Valor position: static
El valor static de la propiedad position en CSS establece el posicionamiento predeterminado de un elemento según el flujo normal del documento HTML, sin afectar su posición relativa a otros elementos ni crear un nuevo contexto de apilamiento. Es decir, no se ve afectado por otras propiedades de posicionamiento como pueden ser top, right, bottom, left y z-index. Es el valor predeterminado de la propiedad.
.elemento {
position: static;
}Valor position: relative
Cuando se asigna el valor relative a un elemento, podemos ajustar su posición de forma relativa a su posición original dentro del flujo HTML. Esto significa que el elemento aún ocupará su espacio original pero se puede desplazar utilizando las propiedades top, right, bottom y left. Por ello otros elementos no se superpondrán a él y su posición modificada puede afectar la disposición de elementos cercanos.
.elemento {
position: relative;
top: 20px;
left: 30px;
}Valor position: absolute
Un elemento definido con position: absolute se posiciona relativo al primer padre posicionado o al elemento raíz del documento. Utilizando las propiedades top, right, bottom y left, puedes establecer las distancias con respecto a estos elementos de referencia. El elemento no deja espacio para otros elementos y se puede superponer a ellos. Podemos usar z-index para controlar la profundidad de esta superposición,
.elemento {
position: absolute;
top: 50px;
right: 20px;
}Valor position: fixed
El elemento con position: fixed permanecerá en la misma posición en relación con la ventana del navegador, incluso si se hace scroll en la página. Esto es útil para elementos que deben mantenerse visibles y accesibles en todo momento, como barras de navegación, encabezados pegajosos o botones de acción.
.elemento {
position: fixed;
bottom: 10px;
left: 10px;
}Valor position: sticky
La propiedad position: sticky de CSS es una combinación de la propiedad position: relative y position: fixed. Esto significa que un elemento se comporta como position: relative hasta que haciendo scroll alcanza un determinado punto de la página que definamos, momento en el que se comporta como position: fixed y se queda en su lugar mientras el usuario sigue desplazándose por la página.
.elemento {
position: sticky;
top: 100px;
background-color: #fff;
}Para un diseñador web, dominar la propiedad position de CSS es clave para poder realizar la maquetación de páginas web complejas.
Referencias:
- Diseño posicionado CSS (inglés) – W3C Working Draft
Deja una respuesta