Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to make a div of iframe float on top of another div of iframe that should be the background of the page
    text
    copied!<p>I read many related questions but my case seems a little bit different that none of those really work for me. </p> <p>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.</p> <p>I guess the reason that all methods I found couldn't work is because the property of my iframe: </p> <pre><code>&lt;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%"&gt;&lt;/iframe&gt; </code></pre> <p>Following is what the entire page look like(I need the radio player to float on the top):</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="radio_player"&gt; &lt;iframe src="http://douban.fm/partner/baidu/doubanradio" frameborder="0"&gt;&lt;/iframe&gt; &lt;/div&gt; &lt;div id="blog_background"&gt; &lt;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%"&gt;&lt;/iframe&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>I'm quite new to coding and posting questions here, thanks for any help.</p> <p>Best Regards</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload