Как установить положение значка над изображением в начальной загрузке 4

Question

Мне нужно поставить значок поверх изображения.

.item {
  position: relative;
}

.des {
  color: #fff;
  text-align: left;
}

<div class="card">
    <div class="item">
        <img class="card-img-top" src="images/g33.jpg" alt="Avatar">
        <div class="des">
            <i class="fa fa-plus-square" style="font-size:48px;color:red"></i>
       </div>
    </div>
    <div class="card-body">
        <h5 class="card-title ">Farwa Waheed</h5>
        <p class="card-text" style="font-size:13px;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
   </div>
</div>

Я ожидаю, что вывод будет значком слева внизу над изображением, но фактическим выводом: значок снимается с рисунка

Answer 1

Вы можете использовать CSS, как показано ниже. Вы также можете изменить положение изображения, изменив значение left или bottom.

.item {
  position: relative;
}

.des {
  position: absolute;
  bottom: 0;
  left: 0;
}

, если оно не работает. Дайте мне знать.