Posicionamiento

El flujo normal, y position: relative

Por defecto, todo elemento sigue el flujo normal del documento: aparece en el lugar que le toca según el orden del HTML y su display (ver Lección 8). Eso es position: static, el valor por defecto.

position: relative hace algo distinto: el elemento sigue ocupando su lugar en el flujo normal (como si nada), pero ahora podés moverlo visualmente desde ahí con top, left, right o bottom — sin que eso afecte a ningún otro elemento de la página.

.caja {
    position: relative;
    top: 20px;
    left: 20px;
}

Esto mueve la caja 20px hacia abajo y 20px hacia la derecha de donde hubiera estado normalmente — el espacio que dejó vacío ahí sigue reservado, como si la caja nunca se hubiera movido.

position: absolute

position: absolute es más drástico: saca al elemento completamente del flujo normal (los demás elementos se acomodan como si no existiera) y lo posiciona en relación al ancestro posicionado más cercano — es decir, el ancestro más cercano que tenga position distinto de static (el valor por defecto).

Si ningún ancestro tiene una posición especial, el elemento se ubica en relación a toda la página.

.contenedor {
    position: relative; /* así se convierte en la referencia */
}
.insignia {
    position: absolute;
    top: 10px;
    right: 10px;
}

Este patrón — un contenedor con position: relative conteniendo un elemento con position: absolute — es el más común en la práctica: sirve para poner algo (una insignia, un ícono de cerrar, un contador) pegado a una esquina de una tarjeta o caja, sin importar el tamaño del contenido.

fixed y sticky

Dos valores más, para casos puntuales:

• position: fixed: se posiciona en relación a la ventana del navegador, no a ningún elemento de la página — y se queda ahí fijo aunque se haga scroll. Es lo que usan, por ejemplo, un botón flotante de "volver arriba" o un chat que siempre está visible en una esquina.
• position: sticky: se comporta como relative normalmente, pero al hacer scroll y llegar a cierto punto, se "pega" y se comporta como fixed desde ahí. Muy usado en encabezados de tabla, o en un menú de navegación que se queda visible mientras se lee el resto de la página.

.boton-arriba {
    position: fixed;
    bottom: 20px;
    right: 20px;
}
thead {
    position: sticky;
    top: 0;
}