I am working on a layout using CSS Grid where I need two grid items to overlap each other. The overlapping elements should have different z-index values to control which one appears on top. However, when I apply z-index values to the overlapping grid items, the z-index property doesn’t seem to have any effect. Both items remain at the same stacking level.

I created a CSS Grid container and defined a grid with specific rows and columns. I positioned the two items to overlap by placing them in the same grid area. Then, I tried to apply z-index to each item to control their stacking order, but the z-index doesn’t seem to change their positioning as expected.

See my code down:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 200px);
  gap: 10px;
  position: relative;
}

.item1 {
  grid-area: 1 / 2 / 3 / 3;
  background-color: lightblue;
  z-index: 1;
}

.item2 {
  grid-area: 1 / 2 / 3 / 3;
  background-color: coral;
  z-index: 2;
}

And the HTML:

<div class="grid-container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
</div>

Thank you in advance.