How to set the maximum allowed bottom border position of an absolutely positioned element

Question

I'm developing a product tag plugin for WordPress and I've done the following:

This is the output code you see 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 has 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 the lower left or lower right position of the badge to be placed at the end of the product image instead of below. Currently, using my CSS, I can place it at the very bottom next to the "Add to Cart" button. I tried adding a breakpoint to set the position relative to some element, but it didn't work. Do you know how I can achieve this?

Answer 1

The only way to do this using CSS (not using JavaScript) is to change the HTML markup. You need to wrap img in an element and put your badge element inside it:

.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