Overlapping items

Unlike flexbox, in grid several items can occupy the same cells. This lets you create overlaps without using position: absolute.

Assign items the same row and column lines, fully or partially.
By default, the last item in the HTML is painted on top.
With z-index you control the stacking order without needing position.
Assigning grid-area: 1 / 1 to several children is a simple pattern for stacking image and text.

Example

The two items share grid cells. Change the z-index value on the item class to decide which one stays in front.

Select z-index:

012

ResultLiveContainer width100%

html

<div class="container">
  <div class="child item">item</div>
  <div class="child other">other</div>
</div>

<div class="container">
  <div class="child item">item</div>
  <div class="child other">other</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 4rem);
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

.item {
  background: #d9d2f5;
  grid-area: 1 / 1 / 3 / 3;
  z-index: 0;
}

.other {
  grid-area: 2 / 2 / 4 / 4;
  z-index: 1;
}

.container {
  border: 1px solid #2b7de0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 4rem);
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

.item {
  background: #d9d2f5;
  grid-area: 1 / 1 / 3 / 3;
  z-index: 0;
}

.other {
  grid-area: 2 / 2 / 4 / 4;
  z-index: 1;
}

Edit the code or use the selectors: the result updates instantly.