之前无法找到答案..与css定位搏斗

时间:2013-12-07 06:16:04

标签: html css image iframe

尝试在图片中显示iframe。不适合我。

http://jsfiddle.net/bKPKh/

HTML

<div id="comp_div">
<img src="Comp.png" id="comp">
<iframe width="700" height="526" src= 
"http://www.youtube.com/embed/1d7td7izg-8" frameborder="0" allowfullscreen></iframe>
</div>

任何帮助将不胜感激。谢谢。

1 个答案:

答案 0 :(得分:1)

给div#comp_div位置:relative;

并将iframe绝对定位在图像上

类似的东西:http://jsfiddle.net/bKPKh/2/

<div class="monitor">
    <img src="http://i.imgur.com/Et22afT.png" height="200" width="200"/>
    <iframe src="http://www.google.com" height="185" width="110"></iframe>
</div>

.monitor {
    position: relative;
}

.monitor iframe {
    position: absolute;
    width: 185px;
    height: 110px;
    top: 22px;
    left: 9px;
    border: 0;
}