2

これが私が達成しようとしていることです。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;
}

コードが現在掲載されている Web サイトは www.traumaslave.com です。

これは本当に私を困惑させました。

私は設計の初期段階にいるので、コーディングが非常に荒いことは理解しています。私はそれをきれいにする必要があります。しかし、私は知りたいです

固定フッターの下でiframeをスクロールさせる方法

また

この問題を回避するためにiframeをきちんとした背景に配置するためのより良いアイデアがあれば

また

問題が iframe 自体にある場合、iframe を含まず、背景にビデオを埋め込むためのコーディングを許可する YouTube ビデオを埋め込むためのソリューションを誰かが知っている場合。

本当にありがとう！

ジェニファー

4

1 に答える 1

0

そのため、静的フッターを静的サイドバーに変更することになりました。見栄えが良くなり、要素の重なりを気にする必要がなくなりました。私はまだ返事を受け取っていないので、とてもがっかりしています。:( したがって、同じ問題を抱えていてこの投稿を調べている人がいる場合は、サイドバーを試すことをお勧めします。私のナビゲーション ペインは水平なので、風変わりに見えないので、うまく機能しました。

ハッピーコーディング！

ジェン

于 2012-06-02T02:58:30.717 に答える