Bootstrap 4 Bootstrap 4.3-使用卡片图像覆盖创建销售标签

我正在完成一个电子商务网站。我在索引页上以引导卡的形式显示项目，并希望在卡片的上角为每一个正在销售的项目创建一个小的“Sale！”标记。我已经尝试过各种大小和位置实用程序，但我一直无法正确使用。我目前拥有的：

标记，带有一些Symfony模板代码：

<div class="card-deck">
{% for newestProduct in newestProducts[1:] %}
    <div class="card d-flex">
        <img class="card-img-top w-100" src="{{ asset('product_images/' ~ newestProduct.filename) }}">
        {% if newestProduct.hasSale == true %}
            <div class="card-img-overlay bg-success text-white w-25 px-2 m-2" style="height: 1rem;">Sale!</div>
        {% endif %}
        <div class="card-body">
            <h5 class="card-title">{{ newestProduct.name }}</h5>
            <p class="card-text">${{ newestProduct.price }}/{% if newestProduct.isFabric == true %}yd{% else %}ea{% endif %}</p>
            <a class="btn btn-burnt-orange" href="{{ path('_store_product_details', {'slug': newestProduct.slug, 'prodId': newestProduct.id}) }}">Check it out!</a>
        </div>
    </div>
    {% endfor %}
</div>

{newestProducts中newestProducts的百分比[1::]}
{%if newestProduct.hasSale==true%}
出售！
{%endif%}
{{newestProduct.name}
${{newestProduct.price}/{%if newestProduct.isFabric==true%}yd{%else%}ea{%endif%}
{%endfor%}

其结果是：

最大的问题是，这个区块的高度太高。。。我不完全确定如何解决这个问题。引导实用程序从25%开始。这似乎是由于使用

卡img覆盖而产生的问题

我走错方向了吗？是否有一种更简单、更优雅或更简单的方法来完成我想要的任务？
使用img上的
相对定位
和
绝对定位
来定位销售标签，而不是图像上的
卡img覆盖
。此外，您还需要将top和left设置为0，以使其在IE中正常工作

<div class="card-deck">
{% for newestProduct in newestProducts[1:] %}
    <div class="card d-flex position-relative">
      <img class="card-img-top w-100" src="https://picsum.photos/200"> 
      {% if newestProduct.hasSale == true %}
          <div class="position-absolute bg-success text-white  px-2 m-2">Sale!</div>
      {% endif %}
      <div class="card-body">
        <h5 class="card-title">{{ newestProduct.name }}</h5>
        <p class="card-text">${{ newestProduct.price }}/{% if newestProduct.isFabric == true %}yd{% else %}ea{% endif %}</p>
        <a class="btn btn-burnt-orange" href="{{ path('_store_product_details', {'slug': newestProduct.slug, 'prodId': newestProduct.id}) }}">Check it out!</a>
      </div>
    </div>
    {% endfor %}
</div>


。销售部{
排名：0；
左：0；
}

{%if newestProduct.hasSale==true%}
出售！
{%endif%}
{{newestProduct.name}
${{newestProduct.price}/{%if newestProduct.isFabric==true%}yd{%else%}ea{%endif%}
{%if newestProduct.hasSale==true%}
出售！
{%endif%}
{{newestProduct.name}
${{newestProduct.price}/{%if newestProduct.isFabric==true%}yd{%else%}ea{%endif%}
{%if newestProduct.hasSale==true%}
出售！
{%endif%}
{{newestProduct.name}
${{newestProduct.price}/{%if newestProduct.isFabric==true%}yd{%else%}ea{%endif%}
您的期望输出是什么请您再解释一下好吗？
.sale-div {
  top: 0;
  left: 0;
}