How can i use z-index to stack one image on another?


I am familiar with z-index but no expert. I am building a site using Avada theme, although there is tons of custom code – I’ve got about 1500 lines of CSS so far. But, if you look you’ll see right at the top, a farmer image and a yellow tomatoes image. Each has multiple parent containers and grandparents. If anyone is skilled enough to use browser dev tools and can get the farmer on top of the yellow image, i’d be so grateful.

This is a huge site that is due for major client review tomorrow.

Also, the yellow tomato pic needs to stay below the yellow text as it does now. I thought about moving the farmer into the same column as the yellow image, but, there is already so much code now and, i do have the yellow text on top of the image, so i really hope to fix this using CSS. I can write CSS, just hoping someone is good with z-index in a complicated place like this.

Below images are first my current state, and second the comp’s goal – where i need to be.

Whoever has time to help me with this today or tonight i will gladly buy you a cup of coffee via PayPal or Venmo. Or just say thanks if you please!
Feel free to go look at it.

Read more here:: How can i use z-index to stack one image on another?

Leave a Reply

Your email address will not be published. Required fields are marked *