How to overlap elements in CSS grid when using "overflow:visible"

Question

I have overflowing elements in a grid (overflow:hidden by default and set to overflow:visible on hover). The default stacking order of the browser in a grid is that "later" elements overlap the "earlier" elements. I would like to invert that overlapping behavior.

The only way I have achieved this so far is manually setting the z-index, so the "earlier" elements have a higher z-index than the later ones. Is there a better way to do this?

.card-container {
  width: 80px;
  display: grid;
  grid-template-columns: repeat(1, minmax(0,1fr));
  grid-gap: 10px;
  background: #aaaaee;
}

.card {
  padding: 5px;
  height: 2em;
  overflow: hidden;
}

.card:hover {
  overflow: visible;
}

.bgcolor {
  background-color:white;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, .2);
}

<div class="card-container">

  <div class="card" style="z-index:3">
    <div class="bgcolor">
      Text A1 Text A2 Text A3 Text A4 Text A5 Text A6 Text A7 Text A8
    </div>
  </div>

  <div class="card" style="z-index:2">
    <div class="bgcolor">
      Text B1 Text B2 Text B3 Text B4 Text B5 Text B6 Text B7 Text B8
    </div>
  </div>

  <div class="card" style="z-index:1">
    <div class="bgcolor">
      Text C1 Text C2 Text C3 Text C4 Text C5 Text C6 Text C7 Text C8
    </div>
  </div>

</div>