Intermedio⏱ 35 min
🎨
CSS · Capítulo 6
Display y Posicionamiento
Controla el flujo del documento con display y ubica elementos con position: relative, absolute, fixed y sticky.
📖
Teoría
Display controla cómo un elemento participa en el flujo del documento:
block: ocupa toda la línea (div, p, h1)
inline: solo ocupa su contenido (span, a)
inline-block: como inline pero acepta width/height
none: oculta el elemento
Position determina cómo se ubica en la página:
static: flujo normal (default)
relative: se desplaza relativo a su posición normal
absolute: relativo al ancestro posicionado más cercano
fixed: relativo al viewport (se queda fijo al hacer scroll)
sticky: híbrido entre relative y fixed
css
/* Posicionamiento absoluto dentro de relative */
.tarjeta {
position: relative; /* contenedor de referencia */
}
.badge-nuevo {
position: absolute;
top: -8px;
right: -8px;
/* se posiciona relativo a .tarjeta */
}
/* Header fijo al hacer scroll */
header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100; /* encima de todo */
}
/* Sticky en tabla o nav */
th {
position: sticky;
top: 0; /* se queda arriba al hacer scroll */
}⚡
Ejercicio práctico
🎯 Tu misión
Crea un menú de navegación con `position: fixed` que se quede visible al hacer scroll. Dentro de una tarjeta, usa `position: absolute` para posicionar una etiqueta "NUEVO" en la esquina superior.
Vista previa