Я пытаюсь нанести маленький значок цвета на изображение продукта с Bootstrap. Все работало хорошо, но мне пришлось изменить изображение на класс embed-responsive, чтобы изображения всех продуктов были одинакового размера. И теперь значок больше не виден. Я думаю, что это потому, что значок теперь находится под изображением. Есть идеи, как мне это решить? Вот мой код:
<div class="list-card-image">
<div class="embed-responsive embed-responsive-16by9">
<div class="star position-absolute" ><span class="badge badge-success">Cuisiné par {{ plat.chef }}</span></div>
<a href="{% url 'display' plat.id %}">
<img src="{{ plat.photo.url }}" class="img-fluid item-img embed-responsive-item" width="100%" height="100%"></a>
</div>
</div>
Заранее спасибо!