我正在为 WordPress 开发一个产品标签插件，并且我已经完成了以下操作：

这是您在图像上看到的输出代码：

<a href="https://localhost/woo-metal/product/test-3/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">

  <div class="wb_badge-container">
    <span class="wb_badge wb_badge-rounded wb_badge-topright" style="background-color:#dd3333;color:#ffffff;">TEST</span>
  </div>

  <img src="https://localhost/woo-metal/wp-content/uploads/woocommerce-placeholder.png" class="woocommerce-placeholder wp-post-image" alt="Placeholder" decoding="async" loading="lazy" width="450" height="450">
  
  <h2 class="woocommerce-loop-product__title">Test 3</h2>
  
  <span class="price">

    <span class="woocommerce-Price-amount amount">
      <bdi>
        <span class="woocommerce-Price-currencySymbol">$</span>0.00
      </bdi>
    </span>

  </span>

</a>

徽章具有以下 CSS：

// ....
.wb_badge {
    z-index: 100;
    position: absolute;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
    min-width: 15px;
    min-height: 15px;
    font-size: 12.5px;
    font-weight: bold;
    text-align: center;
    word-break: break-word;
    -webkit-box-shadow: 0px 0px 3px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 3px -1px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 3px -1px rgba(0,0,0,0.75);
}

.wb_badge-topleft {
    top: 0;
    left: 0;
}
.wb_badge-topright {
    top: 0;
    right: 0;
}
.wb_badge-bottomleft {
    bottom: 0;
    left: 0;
}
.wb_badge-bottomright {
    bottom: 0;
    right: 0;
}
// ....

我希望实现徽章的左下或右下位置放置在产品图像的末尾而不是下方。目前，使用我的 CSS，我可以将其放置在“添加到购物车”按钮旁边的最底部。我尝试添加相对于某些元素的位置来设置位置的断点，但它不起作用。您知道我该如何实现这一目标吗？