Profe Johnny
Manual · Tema 7 de 12

Display y posicionamiento

Cómo fluyen los elementos y cómo sacarlos del flujo normal.

La propiedad display controla cómo se comporta un elemento: block ocupa todo el ancho disponible y salta de línea (como <div>), inline solo ocupa el espacio de su contenido y no permite width/height (como <span>), e inline-block combina ambos comportamientos.

position controla el posicionamiento: static es el flujo normal (por defecto); relative se desplaza respecto a su posición original sin afectar a los demás; absolute se posiciona respecto a su ancestro posicionado más cercano; y fixed queda fijo respecto a la ventana, incluso al hacer scroll.

Un patrón común es un contenedor con position: relative y un elemento hijo con position: absolute, útil para insignias, iconos o superposiciones.

Ejemplo — pruébalo tú mismo

display-posicionamiento.html
Ponlo a prueba: Crea un contenedor relative con un elemento absolute posicionado en la esquina superior izquierda.