Cuando empiezas a trabajar con CSS, uno de los momentos clave llega cuando necesitas colocar un elemento exactamente donde tú quieres. Ahí es donde entran en juego los posicionamientos en CSS.
Aunque hoy en día usamos Flexbox y Grid para la mayoría de layouts, la propiedad position sigue siendo imprescindible para muchos casos concretos.
En esta guía te explico qué es el posicionamiento en CSS, cómo funciona cada tipo (static, relative, absolute, fixed y sticky) y, sobre todo, cuándo usar cada uno sin romper tu diseño, algo que aprendí a base de errores al empezar.
Anteriormente vimos como usar la propiedad background-clip para personalizar el fondo.
Qué es el posicionamiento en CSS y por qué es importante
El posicionamiento en CSS define cómo se coloca un elemento dentro del documento y respecto a qué referencia se mueve. Por defecto, los navegadores siguen el orden natural del HTML, pero con position podemos alterar ese comportamiento.
Flujo normal del documento y orden natural
En el flujo normal:
- Los elementos en bloque se colocan de arriba hacia abajo.
- Los elementos en línea, de izquierda a derecha.
Cuando no especificamos nada, todos los elementos usan position: static.
Esto parece trivial, pero entender el flujo del documento es clave para no frustrarte después cuando algo “no se mueve”.
La propiedad position en CSS
Con CSS es posible posicionar cualquier elemento en cualquier lugar de la pantalla de forma precisa; en CSS existen distintos tipos de posicionamientos.
Valores disponibles de position
Los valores principales son:
- static
- absolute
- relative
- fixed
Cada uno no cambia la forma de posicionar, sino el comportamiento del elemento dentro del documento.
Cuándo usar position y cuándo no
Un error muy común es usar position para construir layouts completos.
Hoy en día:
- Usa Flexbox o Grid para estructuras.
- Usa position para ajustes puntuales, superposiciones, elementos flotantes o fijos.
Este enfoque evita muchos problemas de mantenimiento a largo plazo.
Propiedades de los posicionamientos
A excepción del posicionamiento static es posible emplear las siguientes propiedades para posicionar el elemento en cualquier lugar de la pantalla; puede establecerse como valor cualquier tipo de medidas o porcentajes como podrás ver en el código fuente de los ejemplos:
| top | Se emplea la propiedad top para indicar un desplazamiento del borde superior del elemento con el bloque que contiene al elemento; esta propiedad no tiene efecto para elementos no posicionados. |
| left | La propiedad left indica un desplazamiento del borde izquierdo del elemento con el bloque que contiene al elemento; esta propiedad no tiene efecto para elementos no posicionados. |
| right | La propiedad right indica un desplazamiento del borde derecho del elemento con el bloque que contiene al elemento; esta propiedad no tiene efecto para elementos no posicionados. |
| bottom | Por último y como podrás deducir, la propiedad bottom indica un desplazamiento del borde inferior del elemento con el bloque que contiene al elemento; esta propiedad no tiene efecto para elementos no posicionados. |
Lo que diferencia a cada unos de los posicionamientos vistos anteriormente (static, absolute, relative y fixed) no es la forma de posicionarnos, si no el comportamiento que los hace único en comparación con cualquier otro; en esta entrada explicaremos cada uno de ellos y daremos algunos ejemplos prácticos de los mismo.
El posicionamiento static
El más simple de todos los posicionamientos y el utilizado por todos los navegadores como valor por defecto en todos los elementos; en otras palabras el posicionamiento static no provoca ningún posicionamiento especial en los elementos y por lo tanto las propiedades top, left, right y bottom no se tendrán en cuenta:
Por qué es el valor por defecto
Con position: static:
- El elemento sigue el flujo normal.
- Las propiedades top, left, right y bottom no tienen efecto.
Limitaciones de static
Si alguna vez has escrito:
element {
top: 20px;
}y no pasó nada, probablemente el elemento estaba en static.
Esto me pasó más veces de las que me gustaría admitir cuando estaba empezando.
El posicionamiento absolute
Con este posicionamiento es posible colocar elementos como div de manera absoluta en el documento HTML a través de las propiedades top, left, right y bottom; lo que significa que el elemento queda aparte del flujo normal del documento HTML y no importa en donde aparezca el código HTML el elemento quedará posicionado en el mismo lugar:
El bloque de color rojo contiene al contenedor de color azul el cual se desplaza de izquierda a derecha y de arriba a abajo pero dentro del documento independientemente de si esta dentro de un contenedor.
Qué significa salir del flujo del documento
Un elemento con position: absolute:
- Sale completamente del flujo.
- No reserva espacio.
- Los demás elementos actúan como si no existiera.
La primera vez que ves cómo “desaparece” su espacio, todo empieza a encajar.
Contenedor padre y contexto de posicionamiento
Un elemento absolute se posiciona respecto:
- Al ancestro posicionado más cercano (relative, absolute, fixed o sticky).
- Si no existe, respecto al viewport.
Este punto es crucial. Muchos problemas vienen de no tener un contenedor padre posicionado.
Sistema de coordenadas: top, right, bottom y left
Cada elemento tiene su propio sistema de coordenadas:
- El origen (0,0) está en la esquina superior izquierda.
- Puedes posicionar desde cualquier borde.
Una de mis características favoritas de CSS es poder anclar elementos desde cualquier esquina del contenedor usando estas propiedades.
Sintaxis básica de para el posicionamiento absolute:
.elemento{
position:absolute;
top:50px;
left:200px;
}El posicionamiento relative
Al contrario del posicionamiento anterior el lugar en donde aparezca el código HTML del elemento definirá su posición; en otras palabra su desplazamiento depende del bloque que lo contenga, al igual que en el caso anterior se pueden emplear las propiedades top, left, right y bottom para definir su desplazamiento como podrás darte cuenta en los siguientes ejemplos:
El bloque de color rojo contiene al contenedor de color azul el cual se desplaza de izquierda a derecha y de arriba a abajo pero dentro de su contenedor padre de color rojo.
Cómo se desplaza un elemento relative
Cuando usas relative:
El elemento mantiene su espacio en el flujo.
Se puede mover usando top, left, right y bottom.
Un detalle importante es que los demás elementos no se recolocan, lo que puede provocar superposiciones.
Relative como referencia para absolute
Uno de los usos más importantes de relative no es mover el elemento, sino servir de referencia para elementos hijos con absolute.
En la práctica, suelo usar position: relative en un contenedor casi siempre que voy a posicionar algo de forma absoluta dentro de él.
El posicionamiento fixed
Por último el posicionamiento de tipo fixed tiene los mismas cualidades que el posicionamiento de tipo absolute, pero la posición de éste siempre estará fija (se ancla) sin importar si hay barras de desplazamientos este no variará su ubicación de la pantalla; es muy útil cuando queremos crear un menú que siempre esté ubicado en la cabecera del documento:
Diferencias reales entre fixed y absolute
- absolute se posiciona respecto a un contenedor.
- fixed se posiciona respecto al viewport.
Esto significa que no se mueve al hacer scroll.
Casos prácticos de uso
Uso fixed habitualmente para:
- Menús fijos.
- Banners persistentes.
- Botones de acción flotantes.
Eso sí, hay que tener cuidado porque, al salir del flujo, puede tapar contenido si no se compensa el espacio.
Posicionamiento sticky
sticky es un híbrido entre relative y fixed.
Cómo funciona el efecto “pegajoso”
Un elemento sticky:
- Se comporta como relative.
- Al llegar a un umbral (por ejemplo top: 0), se fija.
Ejemplos comunes con sticky
Es muy común verlo en:
- Cabeceras de secciones.
- Barras de navegación que se “pegan” al hacer scroll.
Bien usado, mejora mucho la experiencia de usuario.
Propiedades de posicionamiento
Estas propiedades solo funcionan si el elemento no es static.
top, left, right y bottom- Indican el desplazamiento desde cada borde.
- Admiten valores negativos, lo que permite mover elementos en sentido contrario.
La propiedad inset
inset es un atajo para:
top: 0;
right: 0;
bottom: 0;
left: 0;
Es especialmente útil para cubrir un contenedor completo, como en overlays o modales.
Valores negativos y comportamiento real
Los valores negativos pueden ser muy útiles, pero también peligrosos si no controlas bien el flujo y las superposiciones.
El eje Z y la propiedad z-index
- Cuando los elementos se superponen, entra en juego el eje Z.
- Cómo se apilan los elementos
- Los valores más altos de z-index se muestran encima.
- Solo funciona en elementos posicionados.
- Errores comunes con z-index
- Uno de los errores más comunes es subir valores sin control (9999, 10000).
En realidad, el orden y el contexto importan más que el número.
- Uno de los errores más comunes es subir valores sin control (9999, 10000).
Errores comunes al usar posicionamientos en CSS
- Por qué no se mueve mi elemento
- Usar static.
- No tener un contenedor posicionado.
- Confundir el contexto de referencia.
- Problemas típicos con absolute y el viewport
- Si un elemento absolute se posiciona respecto al viewport sin que lo esperes, revisa si su contenedor padre tiene position definido.
Cuándo usar position y cuándo Flexbox o Grid
Como regla general:
- Layouts → Flexbox o Grid.
- Ajustes puntuales, superposiciones y elementos fijos → position.
Ejemplos
Veamos una seria de ejemplos para usar el posicionamiento con los distintos valores anteriores.
Posicionamiento static
.box {
position: static;
top: 20px;
left: 20px;
}Resultado:
- El elemento no se mueve.
- Esto suele confundir mucho al principio porque top y left simplemente se ignoran cuando el elemento es static.
Posicionamiento relative (desplazamiento)
.box {
position: relative;
top: 20px;
left: 20px;
}El elemento:
- Se mueve desde su posición original
- Mantiene su espacio en el flujo
absolute con y sin contenedor padre (CLAVE)
Sin contenedor posicionado:
.child {
position: absolute;
top: 0;
left: 0;
}Se posiciona respecto al viewport.
Con contenedor:
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
left: 0;
}Ahora el hijo se posiciona dentro del padre.
Este ejemplo por sí solo evita muchísimos errores reales.
fixed (ejemplo visual inmediato)
.menu {
position: fixed;
top: 0;
right: 0;
}El elemento:
- Sale del flujo
- Permanece fijo al hacer scroll
- Ideal para menús o botones flotantes.
sticky (ejemplo claro)
.header {
position: sticky;
top: 0;
}El elemento:
- Se comporta como relative
- Se “pega” cuando llega al top
Aquí muchos entienden por fin la diferencia con fixed.
z-index (ejemplo mínimo)
.box1 {
position: relative;
z-index: 1;
}
.box2 {
position: relative;
z-index: 2;
}box2 se muestra encima, sin necesidad de valores exagerados.
FAQs — Preguntas frecuentes
- ¿Qué posicionamiento se usa más?
- relative y absolute, normalmente combinados.
- ¿Por qué absolute no ocupa todo el ancho?
- Porque su tamaño depende de su contenido si no defines dimensiones.
- ¿Sticky reemplaza a fixed?
- No, son soluciones distintas para problemas distintos.
Conclusión
Los posicionamientos en CSS no son complicados, pero sí requieren entender bien el flujo del documento, los contextos de posicionamiento y el viewport.
Dominar position te permite resolver muchos problemas específicos sin forzar layouts completos.
Si entiendes cuándo usar cada tipo, CSS deja de parecer impredecible y empieza a comportarse como esperas.
Aprende a como puedes cambiar la forma de un elemento recortándolo a un círculo, un polígono o incluso a una ruta SVG con clip-path en CSS
Acepto recibir anuncios de interes sobre este Blog.
Explicaremos cada uno de los tipos de posicionamiento que actualmente existen en el CSS y daremos algunos ejemplos prácticos de los mismo para entenderlos adecuadamente.