Aviso: Las inscripciones al curso están abiertas (position: fixed)

Logotipo corporativo del curso

Dominando CSS

Descubre la magia de los posicionamientos

¿Qué es position: fixed?

El elemento se posiciona en relación con la ventana del navegador (viewport). Se extrae del flujo normal del documento, por lo que los demás elementos ocupan su lugar. Por eso, el body necesita un padding-top igual a la altura de la barra para no ocultar contenido.

¿Qué es position: sticky?

Es un comportamiento híbrido. El elemento actúa como relative hasta que la pantalla llega a un umbral definido (por ejemplo, top: 40px;). En ese momento, empieza a comportarse como fixed. Si observas nuestro menú, se detiene justo debajo de la barra negra.

¿Qué es position: absolute?

El elemento se posiciona en relación a su ancestro posicionado más cercano (aquel que tenga un position distinto de static). En este caso, el logotipo circular toma como referencia la caja del header.