如何设置 position 绝对元素可以达到的最大允许底线

Question

我正在为 WordPress 开发一个产品 label 插件，我已经完成了以下工作：

这是您在图片上看到的 output 代码：

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

当徽章有一个 bottomleft 或 bottomright position 放置在产品图像的末尾而不是下面时，我想实现。 目前，使用我的 CSS，我可以将其放置在“添加到购物车”按钮旁边的最底部。 我尝试相对于某个元素添加 position 以设置位置的断点，但它没有用。 你知道我怎样才能做到这一点吗？

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

 <a href="https://localhost/woo-metal/product/test-3/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link"> <div class="image-wrapper"> <div class="wb_badge-container"> <span class="wb_badge wb_badge-rounded wb_badge-bottomright" style="background-color:#dd3333;color:#ffffff;">TEST</span> </div> <img src="https://picsum.photos/100/400" class="woocommerce-placeholder wp-post-image" alt="Placeholder" decoding="async" loading="lazy" width="450" height="450"> </div> <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>