Overlapping Elements with CSS Grid

Written 2020-10-03 — Updated 2023-02-10

Put the elements inside a CSS Grid container with one column and one row, then force the elements to all be at row 1, column 1.

<style>
.container {
  display: grid;
  grid-template-rows: 1;
  grid-template-columns: 1;
  place-items: center;
}

container > * {
  grid-row: 1;
  grid-column: 1;
}
</style>

<div class="container">
  <div class="text-red-500">ABC</div>
  <div class="text-green-500">DEF</div>
</div>

Usually this will be done in the context of elements that are transitioning in and out on top of each other.