Diferencia entre posicionamiento "relative" y "absolute" en CSS

El posicionamiento de elementos es un aspecto fundamental para la estructuración visual de una página web. En CSS, se cuenta con los valores “relative” y “absolute” para darle a un elemento un posicionamiento diferente al que tendría según la estructura del documento. Ambos valores tienen un uso distinto y es importante conocer sus diferencias para utilizarlos correctamente en el diseño de nuestra página web.

Posicionamiento "relative"

El valor “relative” permite establecer la posición de un elemento en relación a su posición original. Esto significa que el elemento se moverá de manera relativa de su posición inicial, manteniendo cierta relación de distancia con el lugar donde debería estar. En este caso, la posición del elemento puede ser modificada utilizando las propiedades de CSS como top, bottom, left y right.

Además, si un elemento con posicionamiento “relative” se coloca encima de otro elemento en el flujo del documento, este no afectará el resto del contenido que le sigue.

Un ejemplo de aplicación del posicionamiento “relative” es cuando se desea colocar un ícono sobre un botón sin alterar el resto del contenido de la página. Esto se logra haciendo que el ícono tenga una posición “relative” y moviéndolo utilizando los valores de top y left hasta que esté en la posición deseada.

Es importante tener en cuenta que la posición original del elemento se mantiene reservada aunque el elemento se haya movido con “relative”.

Posicionamiento "absolute"

Por otro lado, el valor “absolute” permite establecer una posición fija para un elemento sin importar su posición original. Es decir, se posiciona en relación al primer elemento que tenga posicionamiento “relative”, “absolute” o “fixed” en su ancestro, y se mueve junto a ese elemento aunque la página sea desplazada.

Si no hay ningún ancestro que tenga posicionamiento “relative”, “absolute” o “fixed”, entonces el elemento se posicionará en relación a la página completa. Una de las características de este tipo de posicionamiento es que el elemento no ocupa un espacio propio en el flujo del documento, lo que significa que otros elementos pueden ocupar el mismo espacio donde se encuentra el elemento posicionado “absolute” y el contenido se superpondrá.

Un ejemplo de uso de “absolute” sería en la realización de un menú desplegable que se ubique en una posición fija en la parte superior de la página sin importar el contenido que tenga la página. El contenedor del menú tendría un posicionamiento “absolute” y se movería con valores de top y left para ubicarlo en la posición deseada.

Conclusión

El conocimiento de las diferencias entre los valores de posicionamiento “relative” y “absolute” en CSS es fundamental en la creación de una página web. Ambos valores permiten el control de la posición de elementos dentro de la página, pero se deben usar adecuadamente según el efecto deseado y el diseño de la página.

Recuerda siempre tener en cuenta que la propiedad posicionamiento afecta el flujo del contenido y que su uso inadecuado puede generar problemas en el diseño de la página y en la experiencia del usuario.

Experimenta y juega con los valores de posicionamiento “relative” y “absolute” para entender mejor su funcionamiento y lograr mejores resultados en tus proyectos.

Preguntas frecuentes

¿Puedo utilizar los valores de posicionamiento “relative” y “absolute” al mismo tiempo en un mismo elemento?

Sí, es posible utilizar ambos valores para controlar la posición de un elemento. El elemento tendrá una posición “relative” en relación a su posición inicial y una posición “absolute” en relación a un ancestro que tenga posicionamiento “relative”, “absolute” o “fixed”.

¿Qué pasa si no hay ningún ancestro que tenga posicionamiento “relative”, “absolute” o “fixed”?

En ese caso, el elemento con posición “absolute” se posicionará en relación a la página completa.

¿Puedo utilizar valores de posicionamiento “relative” o “absolute” en cualquier elemento de la página?

Sí, puedes utilizar valores de posicionamiento “relative” o “absolute” en cualquier elemento de la página, siempre y cuando tengas en cuenta que puede afectar el flujo del contenido.

¿Qué ocurre si dos elementos con posicionamiento “absolute” se superponen?

Si dos elementos con posicionamiento “absolute” se superponen, el que se encuentra en último lugar en el HTML será el que se muestre por encima del otro elemento. Esto es importante tenerlo en cuenta para evitar problemas en el diseño de la página.

Ejemplos de código

Aquí te mostramos un ejemplo de cómo se puede utilizar el posicionamiento “relative” y “absolute” para crear un menú de navegación fijo en la parte superior de una página:


nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
}

a:hover {
background-color: #555;
}

[nekopost slugs="imagen-central-html,tabla-css-color-de-fila-alternativa,establecer-font-border-css,desactivar-la-barra-de-desplazamiento-css,hacer-texto-en-negrita-css,cambiar-fuente-html,hacer-que-div-verticalmente-sea-desplazable-con-css,agregar-ionicons-html,hacer-texto-sin-selectable-css"]