Curso de CSS
Dale estilo y vida a la web.
Aprende CSS con ejemplos interactivos y crea proyectos reales.
position: absolute saca a un elemento del flujo normal y lo posiciona respecto al ancestro posicionado más cercano — la base de badges, tooltips e íconos superpuestos.
Explicación
position: absolute saca al elemento del flujo normal y lo posiciona respecto a un punto de referencia:
position: absoluteEl elemento sale del flujo normal: deja de ocupar espacio y los demás elementos lo ignoran.
contenedor de posicionamientoUn elemento absolute se posiciona respecto al ancestro más cercano que tenga position distinto de static (relative, absolute, fixed o sticky).
sin ancestro posicionadoSi ningún ancestro tiene position definido, el elemento se posiciona respecto al <html> completo, lo que casi nunca es lo que quieres.
Reto rápido
Mueve el badge a la esquina superior izquierda cambiando right por left.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
El patrón "position: relative en el padre + position: absolute en el hijo" es la base de casi cualquier badge, tooltip o ícono superpuesto en una interfaz real.
Dato extra
A diferencia de relative, un elemento absolute no deja ningún espacio vacío donde estaba: es como si lo levantaras del flujo y lo pegaras encima de la página.
Error común
Usar position: absolute en un hijo sin darle position: relative (o similar) al padre: el elemento se posiciona respecto a toda la página en vez de quedarse dentro de la tarjeta.
Siguiente paso
Ya sacas elementos del flujo con precisión. Para terminar, veamos elementos que siguen al usuario mientras hace scroll: fixed y sticky.
Ir a la siguiente lección