CSS 3: Posicionamiento de elementos

Abstract

En este vídeo se explica el concepto de posicionamiento en CSS, mostrando cómo funcionan las propiedades position, top y left. El autor utiliza un ejemplo práctico en Visual Studio Code, donde crea una regla CSS para cambiar la posición de un título (h3) en un documento HTML.

Se muestran cuatro casos diferentes:

Static: La posición predeterminada, que no se ve afectada por las propiedades top y left. Relative: El elemento se desplaza desde su posición natural, según los valores de top y left. Absolute: El elemento se posiciona respecto al primer padre contenedor con posición absoluta, o si no hay ninguno, respecto al body. Fixed: El elemento se fija en una posición específica, sin ser afectado por el scroll.

Finalmente, se muestra un caso especial: Sticky, que combina el comportamiento de relative y fixed, permitiendo que el elemento se desplaze con el scroll hasta alcanzar una posición específica, donde se queda fijo.