CSS Z-Index cannot override when screen size is reduced using media query

Question

When i make full size laptop z-index is 1 for the portion below image and i make media query for max-width of 1020px which is for mobile size and i make the following code to remove z index but it is still the same i cant make the image full size without z-index. Kindly help anyone to sort out this problem CSS:

@media (max-width: 1020px) {
   .title-row{
     text-align: center;
   }
   .title-image{
     position: static;
     transform: rotate(0);
     object-fit: contain;
     z-index: 1;
   }
}

I tried to object fit, z-index, and as much as i can but no use i want the image and features section to be seen separate not features section overlay on image

Answer 1

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

Regards,