z-index is not functioning

[sashavalentina]

I wanted to add class .tag on my image which is in the class .product-img. So i use the method of z-index. I style the z-index in my image tag but the .tag  is not overlapped on my .product-img. As shown in the image shown below. I do not know what mistake i did here. Any help will be appreciated thanks!

<?php 
     if ($preorder_stock == 0){
      echo" <img id='productimg' class='product-img'  loading='lazy' src='../images/product-main/".$row['product_photo']."' > 

      <div id='circle'><p style='font-size:8px; padding-top:30%; text-align:center; ''>Pre Order</br> NOW</p> </div>
          
      " ;
     }else{
       echo" <img style='z-index:-1;' id='productimg' class='product-img'  loading='lazy' src='../images/product-main/".$row['product_photo']."' >
       <div class='tag' style='padding-top:20px;'>
             <div id='circle'><p  style='font-size:8px; padding-top:30%; text-align:center; ''>Pre Order</br> NOW</p> </div>
             </div>

       " ;

     }?>

 

[NotSunfighter]

z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).

[Barand]

Example

<div> <img class='product-img' src='images/mac128.jpg' ></div> 
<div class='overlay'>Pre Order</br>NOW</div>

CSS

<style type='text/css'>
    .overlay {
        width: 60px;
        height: 60px;
        padding-top: 20px;
        border-radius: 50%;
        font-size: 8px; 
        text-align: center;
        background-color: #E02222;
        color: #FFF;
        position: relative;
        top: -70px;
        left: 10px;
        z-index: 5;
    }
</style>

Result