Question

I want to place a image over an iframe. To understand better, I attached the image bellow.

How can I do that?

Answer 1

You can do this with position: absolute; and z-index

http://jsfiddle.net/t35vL/

HTML:

<iframe src="http://jsfiddle.net/"></iframe>
<img src="http://flickholdr.com/600/400/dogs">​

CSS:

iframe{
  width: 600px;
  height: 400px;
  border : 2px solid  black;
  z-index: 2;
}

img{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  opacity: 0.3;
}

…that way the the image is layered over the iframe and will prevent clicking inside it.