CSS Grid vs position absolute: cuándo usar cada uno

Una etiqueta sobre la foto con position absolute

El caso de siempre: una tarjeta con la etiqueta «Nuevo» encima de la imagen. Le das position: relative al contenedor para que sea la referencia y position: absolute a la etiqueta, con top y left para empujarla desde la esquina. Funciona, pero hay un coste: la etiqueta sale del flujo. El contenedor ya no la cuenta, no sabe qué hay a su lado y tú calculas las posiciones a ojo.

.card__media {
  position: relative;
}

.badge {
  position: absolute;
  top: 12px;
  left: 12px;
}

La misma etiqueta con CSS Grid

Con Grid y grid-template-areas conviertes el contenedor en una cuadrícula de una sola celda llamada stack. La imagen y la etiqueta se asignan a esa misma área, así que se apilan sin que ninguna salga del flujo. Después place-self coloca la etiqueta (centrada en vertical, al inicio en horizontal) y el margen sustituye al top y left de antes. El contenedor sigue creciendo con su contenido.

.card__media {
  display: grid;
  grid-template-areas: "stack";
}

.badge {
  grid-area: stack;
  place-self: center start;
  margin: 12px;
}

Dos grupos de etiquetas sin que se pisen

Aquí es donde position: absolute falla. En la tarjeta de producto hay un grupo de etiquetas arriba a la izquierda («Más vendido», «Últimas unidades», «-15%») y otro arriba a la derecha («Oferta instantánea»). Con posición absoluta, si estrechas la tarjeta, un grupo se monta encima del otro porque ninguno sabe que el otro existe.

<ul class="card__badges">
  <li class="badge badge--accent">Más vendido</li>
  <li class="badge">Últimas unidades</li>
  <li class="badge badge--danger">-15%</li>
</ul>
<ul class="card__badges card__badges--dos">
  <li class="badge badge--accent">Oferta instantánea</li>
</ul>

Con Grid defines dos áreas, badges y badges-dos, y cada grupo ocupa la suya. La imagen abarca todas las columnas con grid-column: 1/-1. Si el espacio se acaba, las etiquetas saltan de línea en vez de superponerse. Prueba a arrastrar la esquina de la tarjeta: tiene resize: horizontal justo para eso.

.card{
  resize: horizontal;
}

.card__media {
  display: grid;
  grid-template-areas: "badges badges-dos";
}

.card__media > img {
  grid-column: 1/-1;
  grid-row: 1/-1;
}

.card__badges{
  grid-area: badges;
  padding: 12px;
}

.card__badges--dos{
  grid-area: badges-dos;
  justify-self: end;
}

Un hero con overlay: imagen, degradado y texto en la misma celda

Un hero tiene tres capas: la imagen de fondo, un degradado que mejora la lectura y el texto. Es lo que muchos resuelven con tres position: absolute. Con Grid, la sección declara un área llamada overlay y los tres hijos se asignan a ella. El texto baja con align-self: end. Y como en el HTML va antes que la imagen y el degradado, estos lo taparían: order: 3 lo pinta el último, encima de los demás. Es el equivalente a un z-index, pero solo compara los elementos de ese contenedor.

.hero {
  display: grid;
  grid-template-areas: "overlay";
}

.hero__shade {
  background: linear-gradient(to top, #0F0F14 10%, #0F0F14B3 45%, #0F0F1433);
}

.hero__bg,
.hero__shade, .hero__content{
  grid-area: overlay;
}

.hero__content {
  align-self: end;
  order: 3;
}

Un popover que sí debe flotar: position absolute

Ahora al revés. Un botón «Reaccionar» abre una burbuja de emojis al pasar el ratón. Aquí sí quiero que la burbuja salga del flujo: no debe empujar nada ni ocupar espacio. El HTML usa el atributo popover, que enlaza el botón con la burbuja (popovertarget) y la muestra en la capa superior del navegador (*top layer*). El CSS le da position: absolute, y el ejemplo añade un poco de JavaScript para abrirla al pasar el ratón y calcular su top y left.

<button class="react" id="react" popovertarget="picker" aria-pressed="false">
  ...
</button>

<article class="picker" id="picker" popover>
  ...
</article>

.picker {
  position: absolute;            /* ★ top y left los calcula el JS (sin anchor) */
  inset: auto;
  margin: 0;
  padding: 0 0 12px;             /* puente invisible para el hover */
  color: inherit;
  background: none;
  border: 0;
  overflow: visible;
  translate: -50% -100%;
}

Un menú desplegable que cae debajo de la barra

Otro clásico. La barra es la referencia (position: relative) y el panel se coloca con top: calc(100% + 8px): justo debajo de ella, con 8 píxeles de aire. Con Grid tendrías que reservar una fila vacía y empujar el contenido de la página, y un menú no debe empujar nada. Por eso aquí gana position: absolute.

.topbar {
  position: relative;
}

.nav {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 5;
}

Una notificación pegada al borde de una foto

Último caso: un contador sobre el borde del círculo de una foto de perfil. El elemento sobresale de su contenedor, y las celdas de Grid no están pensadas para sobresalir. Con top, right y un translate de 50 %, la notificación queda justo en el borde a 45°. Podrías forzarlo con Grid, pero estarías reinventando la rueda.

.pet {
  position: relative;            /* ★ referencia para la notificación */
}

.pet__badge {
  position: absolute;
  top: 14.6%;                    /* ★ sobre el borde del círculo, a 45° */
  right: 14.6%;
  translate: 50% -50%;
}