如何在iframe的另一个div上创建一个iframe float,它应该是页面的背景

时间:2012-09-30 22:54:40

标签: javascript html css

我读了很多相关的问题,但我的情况似乎有点不同,没有一个真正适合我。

我想要实现的是拥有一个浮动的广播播放器,在我的博客中播放不间断的音乐。我正在使用iframe将我的博客作为整个页面的背景,然后是另一个用于浮动在前一个iframe顶部的广播播放器的iframe。

我想我找到的所有方法无法正常工作的原因是因为我的iframe的属性:

<iframe src="my blog address" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="120%" width="120%"></iframe> 

以下是整个页面的样子(我需要将收音机放在上面):

<!DOCTYPE html>
<html>
<head>
</head>

<body>

<div id="radio_player">
<iframe src="http://douban.fm/partner/baidu/doubanradio" frameborder="0"></iframe>
</div>


<div id="blog_background">

<iframe src="http://swotong.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="120%" width="120%"></iframe>

</div>


</body>
</html>

我很擅长编码和发布问题,感谢您的帮助。

最好的问候

1 个答案:

答案 0 :(得分:2)

尝试将z-index:1添加到您想要的框架上。

您可以看到它有效here

您必须使用position属性才能实现此目的。

position attributes from css3.com