How can I overlap two elements using CSS Grid?

Make the parent a grid container and assign both children to the same grid area. For a compact overlay, one cell is enough:

.card {
  display: grid;
  width: 20rem;
  min-height: 12rem;
}

.card__image,
.card__label {
  grid-area: 1 / 1;
}

.card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__label {
  align-self: end;
  justify-self: start;
  margin: 1rem;
  z-index: 1;
}

The image and label occupy the same grid cell. Alignment and margin position the label at the lower-left, while z-index puts it above the image. Grid items can share a cell or area and overlap; use z-index when you want to specify their stacking order. [S1]

Choose dimensions that suit the content you are layering. In the example, the parent’s width and min-height give the shared cell a starting size. A banner might need a wider container; a badge over an icon might use the icon’s dimensions instead. Those are design choices rather than special Grid rules.

If an image should determine the card’s height, you can omit the parent’s min-height and let the content contribute to sizing. If the text may wrap or change, check the layout with the longest label you expect. The Grid placement guidance explains how overlap works, but it does not prescribe dimensions for every design. Choose a size appropriate to your content and check it at the screen sizes you intend to support.

Yes. Define rows and columns, then place each item on lines that intersect. For example, one item could occupy columns 1 through 3 while another occupies columns 2 through 4, creating an overlap in the middle columns. The exact placement depends on the tracks in your grid. Explicitly placed items can overlap when their selected row and column ranges intersect; incorrect line choices can cause unintended overlap. Items without explicit placement can still use Grid’s auto-placement. [S2]

For a small overlay, putting both items in grid-area: 1 / 1 is simpler. Use line-based placement when the partial overlap matters, and check each start and end line against the grid you defined.

First confirm that the elements occupy the same cell or intersecting areas. Then check the container’s dimensions and each item’s alignment and margins: these affect the available space and where the items sit within it. If placement is right but the label is behind the image, give the label an intentional z-index. [S1]

A useful pattern is to define the container’s size, place the items in the intended shared area, align each item, and set stacking only when needed. If you use line numbers, note the intended row and column ranges before adjusting CSS; a mistaken line can create overlap somewhere else. [S2]