如何设置绝对定位元素的最大允许底部边界位置

Question

我正在为 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，我可以将其放置在“添加到购物车”按钮旁边的最底部。我尝试添加相对于某些元素的位置来设置位置的断点，但它不起作用。您知道我该如何实现这一目标吗？

Answer 1

使用 CSS（不使用 JavaScript）执行此操作的唯一方法是更改​​ HTML 标记。您需要将 img 包装在一个元素中，并将您的徽章元素放入其中：

.image-wrapper {
  position: relative;
  display: inline-block;
  /* remove this line in your real code. testing only */
}

.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;
  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;
}

  

    

      TEST
    
    
  

  
Test 3

  
    
      
        $0.00