CSS translate going in front vs. behind another div

I'm trying to translate an svg graphic in the y-axis with CSS transforms. I'm having no problem with the translate part:

transform: translate3d(0, -100px, 0);

BUT, the 100px up in the Y direction moves the svg graphic behind the parent div. I've tried putting different z-index on the various elements but can't get the svg graphic to be in front.

Here's images to show you want I mean:

And after the translate:

transform: translate3d(0, -100px, 0);