html - 画像のオーバーヘッドiframe

Question

の上に画像を配置したいiframe。わかりやすくするために、以下の画像を添付しました。

どうやってやるの？

Answer 1

position: absolute;とでこれを行うことができます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;
}

...そのようにして、画像はiframeの上に重ねられ、その中をクリックするのを防ぎます。

Answer 2

あなたはこのようなことを試すことができます：

    <iframe name="inlineframe" src="sample.html" frameborder="1" scrolling="auto" width="500" height="180" marginwidth="5" marginheight="5" ></iframe>
    <div style="position:absolute;
    left:0px; //edit as per iframe placement
    top:0px; //edit as per iframe placement
    z-index:-1;
    padding:5px;"> 
    <img src="rac_ftp.PNG" width="500" height="180" />
    </div>