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 >
            <div  th:each="animal : ${animals}">
                <a href="animal.html">
                <img src="../static/public/animals/gwen-weustink-I3C1sSXj1i8-unsplash.jpg" alt="Avatar" style="width:100%">
                <div >
                  <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.

CodePudding user response：

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