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

Question

Im developing a product label plugin for WordPress and I have the following already done:

Here's the output code of what you're seeing on the image:

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

The badge have the following 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;
}
// ....

I want to achieve when the badge have a bottomleft or bottomright position to be placed AT THE END OF THE PRODUCT IMAGE and not below. Currently with my CSS I can achieve being placed at the very bottom next to the Add to cart button. I tried adding position relative to some element to set a break point of the positions but it didn't worked. Do you have any idea how can I achieve this?

Answer 1

The only way can you do this with CSS (without using JavaScript), is to change your HTML markup. You'll need to wrap the img in an element and put your badge element inside of that:

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