Question

我的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之后。有办法吗？

Answer 1

问题可能在于iframe将flash youtube视频保持在最顶层。它与Flash对象的z-index有关。

我成功之前就使用过这个解决方案......

http://manisheriar.com/blog/flash_objects_and_z_index

将您的Flash内容放入名为flash
添加到您的对象标记
将wmode =“transparent”添加到embed标记
使用CSS设置div的位置和z-index（不要设置负z-index值，因为它会隐藏你的Flash）

使用此css：

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

修改：您必须删除Iframe。因为iframe很糟糕，所以首先要提出一个好主意：p

Answer 2

那是因为ActiveX对象倾向于位于所有html元素之上。您必须在

中添加“无窗口”模式

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

Answer 3

以下是我如何解决它。

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

Answer 4

当我遇到类似情况时我尝试了什么：

 #bridgeDIV
{
position:relative;
}

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

想象一下河流在桥下流动。

在另一个div下用youtube视频滚动div

4 个答案: