- Posicionamiento relativo en grid
- Posicionamiento absoluto en grid
- Cómo usar absolute dentro de un Grid
- Pistas implícitas en Grid
- ¿Y qué pasa con z-index?
Cuando trabajas con CSS Grid, puedes seguir usando las propiedades de posicionamiento que ya conoces, como relative y absolute. Pero dentro de una cuadrícula (display: grid), su comportamiento puede variar ligeramente. En esta lección, te explicamos cómo interactúan con Grid y cómo puedes usarlas de forma eficaz.
Posicionamiento relativo en grid
Empecemos con un repaso.
Cuando usas position: relative;, puedes mover un elemento desde su posición original usando propiedades como top, left, right o bottom. Pero ese movimiento es solo visual: el elemento sigue ocupando su lugar original, y los elementos vecinos no cambian su posición.
👉 La propiedad relative se usa cuando quieres ajustar ligeramente la posición de un elemento sin romper el flujo del documento.
Cuando ese elemento está dentro de una cuadrícula (display: grid), esto sigue funcionando igual:
- El elemento se puede mover visualmente.
- La cuadrícula sigue reservando el mismo espacio.
- La estructura del grid no se rompe.
Si cambias el tamaño del viewport, verás que el elemento sigue ocupando su lugar dentro del grid, ya que position: relative; no lo saca del flujo del documento.
Posicionamiento absoluto en grid
El posicionamiento absoluto (position: absolute;) tiene un comportamiento muy diferente:
- El elemento sale completamente del flujo del documento.
- No ocupa espacio en la cuadrícula ni en el layout general.
- Su posición depende del contenedor posicionado más cercano (es decir, un elemento padre con
position: relative;). Si no existe, se posiciona respecto al<html>.
Esto se usa cuando quieres que un elemento flote sobre otros o esté en una posición exacta, sin influir en el resto de la estructura.
Cómo usar absolute dentro de un Grid
Aquí es donde empieza lo interesante.
Para que un elemento con position: absolute; se mantenga dentro de la cuadrícula, su contenedor (por ejemplo, .grid-container) debe tener position: relative;.
Una vez hecho esto, tienes dos formas de posicionarlo
Opción 1: top, left, right, bottom
Este es el enfoque tradicional: posicionas el elemento usando coordenadas relativas al borde del contenedor.
.grid-container {
position: relative;
}
.grid-item {
position: absolute;
top: 20px;
left: 30px;
}
Opción 2: grid-column y grid-row
Esta opción es menos conocida, pero muy poderosa.
Incluso si un elemento está posicionado de forma absoluta (position: absolute;), puedes usar grid-column y grid-row para alinearlo visualmente con las líneas del grid.
Esto no lo devuelve al flujo del layout —es decir, no empuja ni desplaza a otros elementos—, pero sí te permite que quede perfectamente alineado con las celdas del grid.
Esto es útil cuando quieres colocar un elemento encima del diseño (como un botón flotante o una etiqueta), pero que siga respetando la estructura del grid visualmente.
top o left. Solo ayudan a alinear el elemento con las columnas y filas del grid. Si necesitas una posición exacta, usa coordenadas. .grid-item {
position: absolute;
grid-column: 2 / 4;
grid-row: 1;
}
Con esto, por ejemplo, puedes hacer que un icono decorativo o un botón de cerrar quede perfectamente alineado con una celda o sección de la cuadrícula, sin romper el diseño general.
Pistas implícitas en Grid
En CSS Grid, puedes definir explícitamente cuántas filas o columnas tendrá tu diseño.
Pero si colocas un elemento en una posición que no existe (por ejemplo, grid-row: 5; en una cuadrícula que solo tiene 3 filas), el navegador generará pistas implícitas automáticamente para ubicar ese elemento.
✅ Esto también funciona con elementos absolutamente posicionados.
¿Para qué sirve absolute en un diseño con Grid?
Aunque la idea de Grid es organizar elementos dentro de una estructura, hay muchos casos donde necesitas salirte de esa estructura:
- Un botón flotante dentro de una tarjeta
- Una etiqueta que sobresale en una esquina
- Un icono de cierre superpuesto
- Un banner decorativo que ocupa varias columnas
Usar position: absolute; dentro de Grid te da más libertad visual sin alterar el resto del diseño.
👉 Haz clic para ver el ejemplo: Diseño moderno con overlays
¿Y qué pasa con z-index?
Funciona igual que siempre:
- Solo tiene efecto si el elemento está posicionado (
relative,absolute,fixed). - Controla qué elementos aparecen encima o debajo de otros.
Esto es muy útil si tienes un botón, un menú o un mensaje flotante que debe estar por encima del resto del contenido.
Puedes experimentar con los ejemplos anteriores cambiando el z-index para ver qué se superpone.
Comparación rápida
| Propiedad | ¿Afecta al flujo? | ¿Se alinea con el Grid? | ¿Requiere padre con relative? |
|---|---|---|---|
top / left / etc. |
❌ No | ❌ No | ✅ Sí |
grid-column / grid-row |
❌ No | ✅ Sí | ✅ Sí (para absolute) |
Resumen
position: relative;mueve un elemento visualmente sin alterar el layout.position: absolute;lo saca del flujo y lo posiciona respecto a su contenedor más cercano posicionado.- Si ese contenedor es un Grid, puedes usar:
top/leftpara posicionarlo por coordenadas.grid-column/grid-rowpara alinearlo visualmente con la cuadrícula.- Las pistas implícitas permiten colocar elementos fuera del rango inicial definido.
z-indexpermite controlar qué se ve por encima de qué.
Para acceder completo a curso necesitas un plan básico
El plan básico te dará acceso completo a todos los cursos, ejercicios y lecciones de Códica, proyectos y acceso de por vida a la teoría de las lecciones completadas. La suscripción se puede cancelar en cualquier momento.
