Placing content over an iframe?

Question

Please can anyone help me to put something over the iframe like div or canvas, my case is i have iframe from Photosynth.net, and i need to put like character over this iframe ?? and i use the z-index but still it's not working.

Solution

I have created a simple sample showing how to use CSS to position content over top of an iframe. It's just simple CSS layering:

<iframe src="http://phrogz.net/"></iframe>
<div id="over">HI MOM</div>

And then in your stylesheet:

iframe { width:100%; height:300px; border:3px groove #f00 }
#over { font-size:5em; position:absolute; top:20px; left:20px; z-index:2 }

Comments

[Evorlor]

Am I mistaken, or do you need to change #over every time you change the position of your iframe?