Propiedad position en CSS y Control del Flujo de la Página Web

Introducción

En esta clase, aprenderemos sobre la propiedad position en CSS, que es fundamental para controlar el flujo y la disposición de los elementos en una página web. Veremos los valores relative y absolute, y cómo estos afectan la posición de los elementos en relación a otros elementos en la página.

1. Concepto de Flujo en una Página Web

• Flujo: Es la disposición natural de los elementos en una página web. En HTML, los elementos se colocan en orden descendente. Por ejemplo, un <div> situado en la parte superior del HTML aparecerá en la parte superior de la página.
• Pregunta Clave: ¿Podemos modificar el flujo de la web? Sí, esto se logra principalmente mediante la propiedad position.

2. La Propiedad position en CSS

• La propiedad position define cómo se posicionan los elementos en la página.
• Los valores de position en CSS especifican la referencia desde la cual un elemento debe posicionarse.

3. Valor relative

• Descripción: Al aplicar position: relative; a un elemento, este se posiciona en función de su posición natural, permitiendo modificar su ubicación sin afectar el flujo general de otros elementos.
• Uso de Propiedades: Al usar position: relative;, se activan las propiedades top, left, bottom y right que permiten ajustar la ubicación del elemento respecto a su posición original.
• Ejemplo:
  • Si aplicamos position: relative; a un <div> con clase .rojo, y luego agregamos top: 40px;, el <div> se desplazará hacia abajo 40 píxeles.
  • Importante: Aunque el elemento cambia de posición visual, su posición original sigue «reservada», lo cual significa que otros elementos en el flujo de la página no se ven alterados en función del desplazamiento.
• Diferencia con margin-top: La propiedad top desplaza un elemento sin modificar el flujo circundante, mientras que margin-top crea un espacio adicional alrededor del elemento, empujando otros elementos en el flujo.

4. Valor absolute

• Descripción: La propiedad position: absolute; permite a un elemento “salirse” del flujo normal de la página, sin dejar espacio para su posición en el flujo original.
• Ejemplo:
  • Supongamos que tenemos cuatro elementos, y aplicamos position: absolute; al elemento .rojo. Este elemento ignorará el flujo y se posicionará en la esquina superior de la página o en la referencia especificada.
  • En este caso, los elementos que originalmente estaban debajo de .rojo ocuparán el lugar que deja al “salirse” del flujo.
• Uso en Conjunto con relative:
  • Si al elemento padre de un elemento con position: absolute; le aplicamos position: relative;, el hijo .absolute tomará como referencia este contenedor en lugar de toda la página.
  • Ejemplo con elementos: Si un <div> azul tiene position: relative; y un <div> rojo en su interior tiene position: absolute;, el <div> rojo se posicionará dentro de los límites del <div> azul, y propiedades como left: 50%; se aplicarán en relación al tamaño del contenedor azul.

5. Resumen y Consejos

• position: relative;: Modifica la posición de un elemento sin alterar el flujo general. Útil para pequeños ajustes visuales.
• position: absolute;: Saca al elemento del flujo de la página, permitiendo posicionarlo en un lugar específico sin afectar los elementos circundantes.
• Combinación de relative y absolute: Usar relative en un contenedor padre y absolute en un hijo permite posicionar el hijo dentro del marco del contenedor.
• Práctica: La mejor manera de dominar estas propiedades es practicar constantemente para comprender su funcionamiento en diferentes contextos.