CODEWITHSUNDEEP
javascripthtmlcss
Arch1tect
Arch1tect

Reputation: 4281

How to make a div of iframe float on top of another div of iframe that should be the background of the page

I read many related questions but my case seems a little bit different that none of those really work for me.

What I'm trying to achieve is to have a floating radio player that play nonstop music throughout my blog. I'm using iframe to put my blog as the background of the whole page, then another iframe for the radio player that float on top the previous iframe.

I guess the reason that all methods I found couldn't work is because the property of my 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>

Following is what the entire page look like(I need the radio player to float on the top):

<!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>

I'm quite new to coding and posting questions here, thanks for any help.

Best Regards

Upvotes: 2

Views: 6183

Answers (1)

raam86
raam86

Reputation: 6871

try adding z-index:1 to the frame you want on top.

You can see it working here

you have to use a position property for this to work.

position attributes from css3.com

Upvotes: 2

Related Questions