While building the Bare Bins website I created a cool animation where the lorry moves across the screen infront of a Scottish themed skyline, I moved about with the rows on Visual Composer in order to make the lorry position itself next to the skyline and changed the z-index of the rows using Custom CSS classes to make sure the lorry appears in front of the skyline row.
https://webcarepreview.co.uk/barebins/
It worked perfectly on Firefox but in Chrome and Safari the lorry was still behind the skyline image.
After research I found this article - http://doctype.com/google-chrome-respecting-zindex
Solved. Do recall, this was only occurring on the left half of the screen, and only on certain pages- whereby the #left_outer div was overlapping half of the #content -
https://webcarepreview.co.uk/barebins/
It worked perfectly on Firefox but in Chrome and Safari the lorry was still behind the skyline image.
After research I found this article - http://doctype.com/google-chrome-respecting-zindex
Solved. Do recall, this was only occurring on the left half of the screen, and only on certain pages- whereby the #left_outer div was overlapping half of the #content -
In order for z-index to work properly, the element is supposed to be position:absolute or position:relative... thus, I had to set it accordingly.
So I added the css attribute 'position:relative;' to the Lorry row's custom css class and it solved it.