Jump to content

z-index is not functioning


sashavalentina
 Share

Recommended Posts

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!

image.png.f429e478b1729a4aa88a5f3010302cf4.png

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

       " ;

     }?>

 

Link to comment
Share on other sites

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

image.png.1c3ddaed6c0e18b10aace83a5ce5088c.png

  • Like 1
Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.