Bagaimana untuk menetapkan kedudukan sempadan bawah maksimum yang dibenarkan bagi elemen yang diposisikan secara mutlak

Question

Saya sedang mengusahakan pemalam teg produk untuk WordPress dan saya telah melakukan perkara berikut:

Ini ialah kod output yang anda lihat pada imej:

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

Lencana mempunyai CSS berikut:

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

Saya mahu kedudukan bawah kiri atau kanan lencana diletakkan di hujung imej produk dan bukannya di bawah. Pada masa ini, menggunakan CSS saya, saya boleh meletakkannya di bahagian paling bawah di sebelah butang "Tambah ke Troli". Saya cuba menambah titik putus untuk menetapkan kedudukan relatif kepada beberapa elemen tetapi ia tidak berfungsi. Adakah anda tahu bagaimana saya boleh mencapai ini?

Answer 1

Satu-satunya cara untuk melakukan ini menggunakan CSS (tidak menggunakan JavaScript) ialah menukar markup HTML. Anda perlu membalut img dalam elemen dan meletakkan elemen lencana anda di dalamnya:

.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