So legen Sie die maximal zulässige untere Randposition eines absolut positionierten Elements fest

Question

Ich arbeite an einem Produkt-Tag-Plugin für WordPress und habe Folgendes getan:

Dies ist der Ausgabecode, den Sie auf dem Bild sehen:

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

Das Abzeichen hat das folgende 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;
}
// ....

Ich möchte, dass die untere linke oder rechte Position des Abzeichens am Ende des Produktbilds statt unten platziert wird. Derzeit kann ich es mit meinem CSS ganz unten neben der Schaltfläche „In den Warenkorb“ platzieren. Ich habe versucht, einen Haltepunkt hinzuzufügen, um die Position relativ zu einem Element festzulegen, aber es hat nicht funktioniert. Wissen Sie, wie ich das erreichen kann?

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