iframe issue, how to layer html over iframe with Bandcamp embed
===

I have a little issue with my site; here is an example page:
http://www.theskycaptain.com/projects/cosmicwomb.html

So as you can see, the Bandcamp player is embedded, and it is an iframe. I want it to be layered UNDER my header and footer html elements, but for the life of me I can't figure out to how to achieve this using html and css.
i have tried z-index to no avail.
I have tried specifying wmodepaque to no avail.
I have tried wrapping it in a div and trying both techniques above.

Here is the embed code from Bandcamp (for the player in the example link):

    <<iframe width="300" height="290" style="position: relative; display: block; width: 300px; height: 290px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/album=3017681057/size=grande2/bgcol=fffcef/linkcol=795b48/" allowtransparency="true" frameborder="0"><a href="http://skycaptain.bandcamp.com/album/sounds-from-the-cosmic-womb">Sounds From The Cosmic Womb by Sky Captain</a></iframe>iframe width="300" height="290" style="position: relative; display: block; width: 300px; height: 290px;" src="http://bandcamp.com/EmbeddedPlayer/v=2/album=3017681057/size=grande2/bgcol=fffcef/linkcol=795b48/" allowtransparency="true" frameborder="0"><a href="http://skycaptain.bandcamp.com/album/sounds-from-the-cosmic-womb">Sounds From The Cosmic Womb by Sky Captain</a></iframe>

Is this impossible to do with the iframe?
Could I break Bandcamp's code and embed it as an object?
Thank you very much for your help! 