Comment définir la position maximale autorisée de la bordure inférieure d'un élément en position absolue

Question

Je travaille sur un plugin de balise de produit pour WordPress et j'ai effectué les opérations suivantes :

Voici le code de sortie que vous voyez sur l'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>

Le badge a le CSS suivant :

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

Je souhaite que la position inférieure gauche ou droite du badge soit placée à la fin de l'image du produit plutôt qu'en dessous. Actuellement, en utilisant mon CSS, je peux le placer tout en bas à côté du bouton "Ajouter au panier". J'ai essayé d'ajouter un point d'arrêt pour définir la position par rapport à un élément mais cela n'a pas fonctionné. Savez-vous comment je peux y parvenir ?

Answer 1

La seule façon de faire cela en utilisant CSS (et non en utilisant JavaScript) est de modifier le balisage HTML. Vous devez envelopper img dans un élément et y mettre votre élément badge :

.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