絕對定位iframe覆蓋固定頁腳

這是我正在努力完成的。我有背景，我想把iframe元素放在頂部。絕對定位iframe覆蓋固定頁腳

我使用的HTML如下：

<div id="container"> 
    <img src="images/videoframe.png" id="img1" /> 
    <iframe id="img2" width="370" height="209" src="http://www.youtube-nocookie.com/embed/BWW7te-P5Ak?rel=0" frameborder="0" allowfullscreen></iframe> 
</div>

我來完成，這是如下的CSS：

#container { 
    position:relative; 
} 

#img2 { 
    position: absolute; 
    left: 50px; 
    top: 29px;

我設法得到它的正常工作。我的問題是這樣的... 我有一個固定頁腳和iframe（但只有iframe）重疊並覆蓋固定頁腳的一部分。

我對固定頁腳的HTML如下：

<div class="floatingfooter"> 
    <a href="http://www.facebook.com/TraumaSlaveSC" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FacebookIcon','','images/socialmedia/Stone-FaceBook2.png',1)"><img src="images/socialmedia/Stone-FaceBook.png" alt="Like Us on Facebook" name="FacebookIcon" width="86" height="85" border="0" class="centerimage" id="FacebookIcon" /></a> 

<a href="http://www.facebook.com/TraumaSlaveSC" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('MySpaceIcon','','images/socialmedia/Stone-MySpace2.png',0)"><img src="images/socialmedia/Stone-MySpace.png" alt="Add Us on MySpace" name="MySpaceIcon" width="85" height="85" border="0" class="centerimage" id="MySpaceIcon" /></a> 



<a href="http://www.reverbnation.com/traumaslave" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ReverbNationIcon','','images/socialmedia/Stone-Reverb2.png',1)"><img src="images/socialmedia/Stone-Reverb.png" alt="Listen to us on Reverbnation" name="ReverbNationIcon" width="85" height="85" border="0" class="centerimage" id="ReverbNationIcon" /></a> 
<a href="http://twitter.com/traumaslavefan" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('TwitterIcon','','images/socialmedia/Stone-Twitter2.png',1)"><img src="images/socialmedia/Stone-Twitter.png" alt="Follow Us on Twitter" name="TwitterIcon" width="86" height="85" border="0" class="centerimage" id="TwitterIcon" /></a><a href="http://www.youtube.com/traumaslave" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('YouTubeIcon','','images/socialmedia/Stone-YouTube2.png',1)"><img src="images/socialmedia/Stone-YouTube.png" alt="Watch Our YouTube Channel" name="YouTubeIcon" width="85" height="85" border="0" class="centerimage" id="YouTubeIcon" /></a></div>

我對固定頁腳CSS是在這裏：

.floatingfooter { 
    color: #ffffff; 
    font-size: 14px; 
    font-family: Verdana, Geneva, Arial, sans-serif; 
    background-color: #7A6D50; 
    text-align: center; 
    position:fixed; 
    bottom: 0px; 
    left: 0px; 
    width: 100%; 
    height: 105px; 
    z-index: 100000; 
    vertical-align: middle; 
    padding-top: 20px; 
}

其中代碼當前發佈的網站是www.traumaslave。 com

這真的讓我難住。

我處於早期的設計階段，所以我明白我的編碼是非常粗糙的。我需要清理它。不過，我想知道

如何使固定頁腳下的iframe滾動

如果任何人有把的iframe在一個整潔的背景更好的想法，這將規避這一問題

如果問題是iframe的本身，如果有人知道嵌入YouTube視頻，這將不包括iframe也將仍然允許編碼嵌入在後臺的視頻解決方案。

非常感謝！

Jennifer

來源

2012-05-29 Jennifer Wreckingballs Eckert

也是我嘗試？的wmode =透明和Z指數。沒有什麼工作。 –

我無法相信我仍然沒有回覆。:(這是令人失望的。嗯，我想我會另外嘗試另一種解決方案，比如可能會找到一些可以運行視頻的js，我不知道...... ...... –

所以我最終將靜態頁腳改爲靜態邊欄。它看起來更好，我不需要擔心重疊的元素。我仍然非常失望，我從未收到過答覆。 :(所以如果有人有這個相同的問題，並尋找這篇文章，我建議你嘗試一個側邊欄，它對我很好，因爲我的導航面板是水平的，所以它看起來不古怪

Happy編碼！

爵

來源

2012-06-02 02:58:30

絕對定位iframe覆蓋固定頁腳

回答

相關問題