Question

I have a background gradient on a div (only code for FF shown below for readability)

background-image: -moz-linear-gradient(bottom, rgb(238,238,238) 0%, rgb(255,255,255) 100%);

I then have an image inside this that needs to “break out” the bottom over a second div below that has the same gradient. I am using z-index 2 on the image, z-index 1 on the div.

This works fine when the divs have no gradient (just a solid background colour), but as soon as I apply the gradient the z-index fails and the image drops behind the second div, see images below:

With gradient background

With solid background

Answer 1

The issue was the z-index on the containing div, even though it was set lower than the image, removing it fixed the problem :/