jQuery toggle makes element show up behind element below it

I have a hidden element on my page. When a button is clicked, it makes the element below it slide down using slideToggl开发者_开发技巧e. The problem is that it is showing up behind the content that is below it: http://jsfiddle.net/Messp/

I would like to make the toggled image to show in the front of the content. I tried using z-index but that does not work. Does anyone know how to fix this issue?

The image needs to be a positioned element for the z-index to take effect.

Throwing "position: relative;" on it should do the trick. :)

http://jsfiddle.net/Dygerati/DyPeC/1/embedded/result/

add a position:relative to the image, right after the z-index