Display y posicionamiento
Antes de llegar a Flexbox y Grid, hay dos propiedades fundamentales que definen cómo se comporta cada caja: display (qué tipo de caja es) y position (cómo se ubica respecto a lo que la rodea).
La propiedad display
Ocupa todo el ancho disponible y siempre empieza en una nueva línea. Ej: div, p, h1.
Solo ocupa el espacio de su contenido y fluye junto al texto, sin saltar de línea. No respeta width ni height. Ej: span, a, strong.
Un híbrido: fluye en línea como inline, pero sí respeta width, height, margin y padding como block.
El elemento desaparece por completo, como si no existiera en el documento (a diferencia de visibility: hidden, que lo oculta pero deja el espacio vacío).
La propiedad position
Cambia cómo se calcula la posición final de un elemento en la página.
El valor por defecto. El elemento sigue el flujo normal del documento; top/left/right/bottom no tienen efecto.
Sigue el flujo normal, pero puedes desplazarlo desde su posición original con top/left/right/bottom, sin afectar a los elementos vecinos.
Sale por completo del flujo normal y se posiciona respecto a su ancestro más cercano que tenga position distinto de static (normalmente uno con relative).
Se posiciona respecto a la ventana del navegador, y se queda fijo aunque hagas scroll. Útil para cabeceras o botones flotantes.
Un híbrido: se comporta como relative hasta que, al hacer scroll, alcanza cierto punto — entonces se "pega" como fixed. Es justo lo que usa la barra lateral de este curso.
La pareja relative + absolute es uno de los patrones más usados en CSS: el
padre lleva position: relative (sin moverse de
sitio), y el hijo lleva position: absolute para
colocarse en una esquina exacta de ese padre — como la etiqueta "Nuevo" del
ejemplo.
z-index: quién queda por encima
Cuando varios elementos posicionados se superponen, z-index
decide el orden de apilamiento: un valor más alto queda por encima. Solo funciona en
elementos que ya tienen un position distinto de static.
Usar position: absolute sin que ningún ancestro
tenga position: relative. En ese caso, el elemento
se posiciona respecto a toda la página (<html>), no respecto al contenedor
que esperabas, y suele acabar en un sitio inesperado.
Ponlo a prueba
Comprueba lo que has aprendido
1. ¿Qué display permite fijar width y height pero sin saltar de línea?
2. ¿Respecto a qué se posiciona un elemento absolute?
3. ¿Qué tiene de especial position: sticky?