0

私は以下のようなHTMLを持っています

<html>
<body>
<div id="d1" 
  style="height:100px;width:100%;background-color:#CFE;position:fixed;z-index:1000"> 
</div>

<div id="d2" style="padding-top:110px;z-index:-1000;background-color:#CCE;height:1000px;">
<iframe width="420" height="315" 
   src="http://www.youtube.com/embed/XZxo7IznQnk" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>

トップ div (d1) は固定です。一番下の div(d2) をスクロールしている間、一番上の div の後ろに移動します。しかし、YouTubeビデオは一番上にとどまります。

トップdivの後ろに置きたいです。方法はありますか??

4

4 に答える 4

1

これが私がそれを解決した方法です。

<html>
<body>
<div id="d1" 
  style="height:100px;width:100%;background-color:#CFE;position:fixed;z-index:1000"> 
</div>

<div id="d2" style="padding-top:110px;z-index:-1000;background-color:#CCE;height:1000px;">
<iframe width="420" height="315" 
   src="http://www.youtube.com/embed/XZxo7IznQnk?wmode=transparent" 
     frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>

iframe の src の ?wmode=transparent" に注意してください

于 2012-07-16T09:46:35.710 に答える
1

問題は、iframe がフラッシュ youtube ビデオを一番上に保持している可能性があります。Flash オブジェクトの z-index に関係しています。

以前にこのソリューションを使用して成功しました...

http://manisheriar.com/blog/flash_objects_and_z_index

  • Flash コンテンツを flash というラッパー div に配置します。
  • オブジェクトタグに追加
  • wmode="transparent" を埋め込みタグに追加します
  • CSS を使用して、div の位置と z-index を設定します (Flash が隠れてしまうため、負の z-index 値を設定しないでください)。

この CSS を使用します。

#flash {
    position: relative; /*or absolute*/
    z-index: 0;
}

編集: Iframe を削除する必要があります。iframeは吸うので、そもそも良いアイデアをビンに入れます:p

于 2012-07-13T12:45:41.797 に答える
1

これは、ActiveX オブジェクトがすべての html 要素の上に配置される傾向があるためです。「ウィンドウレス」モードを追加する必要があります

<object>
    <param name="wmode" value="window" />
</object>

于 2012-07-13T12:45:48.463 に答える
0

同様の状況に遭遇したときに試したこと：

 #bridgeDIV
{
position:relative;
}

#riverDIV
{
position:fixed;
overflow-y:scroll;
}

橋の下を流れる川をイメージしてください。

于 2013-03-13T09:04:38.633 に答える