Display grid position absolute not working correctly

Question

I'm trying to do a image catalog with some card with text inside it but it doesn't work with position absolute on the text and position relative on the card

/*catalog style*/

.grid-container {
  padding: clamp(5px, 10vw, 20px) clamp(5px, 15vw, 30px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-auto-rows: auto;
  column-gap: 40px;
  row-gap: 40px;
}

.card {
  position: relative;
  background-color: #EADDA6;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 20px;
}

.card:hover {
  box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.2);
  opacity: 0.8;
  transition-duration: 0.3s;
}

.card img {
  position: relative;
  border-radius: 20px;
  object-fit: cover;
}

.card-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 16px;
}

<section class="grid-container">
  <div class="card" th:each="animal : ${animals}">
    <a href="animal.html">
      <img src="../static/public/animals/gwen-weustink-I3C1sSXj1i8-unsplash.jpg" alt="Avatar" style="width:100%">
      <div class="card-container">
        <h4 th:text="${animal.getName()}"><b>Tiger</b></h4>
        <p th:text="${animal.getSpecies()}">Mario</p>
      </div>
    </a>
  </div>
</section>

i've tried putting position relative to each parent element but the text always remains below the card and not inside it as it should and also without display grid works correctly.

Answer 1

it works but you must add positions from left, right, top or bottom. for example. position:absolute; left:0px; and top:0px;