Skip to content
WebTricks

Overlap elements with CSS Grid

Stack elements in the same grid cell to layer a caption over an image — no absolute positioning.

  • grid
  • layout
  • overlap
  • stacking
  • z-index
Image color 1#7c5cff
Image color 2#00b8d4
Height180px
HTML 
<figure class="stack"><div class="stack__media"></div><figcaption class="stack__caption">Overlay caption</figcaption></figure>
CSS 
:root {
    --c1: #7c5cff;
    --c2: #00b8d4;
    --height: 180px;
}

.stack {
    display: grid;
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
}

/* Every child shares the one and only grid cell, so they overlap */
.stack > * {
    grid-area: 1 / 1;
}

.stack__media {
    height: var(--height);
    background: linear-gradient(135deg, var(--c1), var(--c2));
}

.stack__caption {
    align-self: end;          /* sit at the bottom of the cell */
    padding: 12px 14px;
    color: #fff;
    font-weight: 600;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
}

How it works

Give a grid container children that all target the same cell with grid-area: 1 / 1, and they stack on top of each other — the later one in the DOM paints on top, no position: absolute needed.

  • Because the items are still in normal grid flow, the container sizes itself to the tallest child automatically (here, the media block).
  • align-self and justify-self position each layer within the shared cell — align-self: end drops the caption to the bottom.
  • Need a specific paint order? Add z-index; grid items respect it.

It’s perfect for captions over images, badges on cards, or a “play” button over a thumbnail. More in the CSS Grid guide.