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

问题可能是 iframe 将 flash youtube 视频放在顶部。它与 Flash 对象的 z-index 有关。

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

http://manisheriar.com/blog/flash_objects_and_z_index

  • 将您的 Flash 内容放入名为 flash 的包装 div
  • 添加到您的对象标签
  • 将 wmode="transparent" 添加到嵌入标签中
  • 使用 CSS 为您的 div 设置位置和 z-index（不要设置负 z-index 值，因为它会隐藏您的 Flash）

使用这个 CSS：

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

编辑：您必须删除 iframe。Wich 首先是一个好主意，因为 iframe 很烂：p

于 2012-07-13T12:45:41.797 回答
1

这是因为 ActiveX 对象往往位于所有 html 元素之上。你必须添加一个“无窗口”模式到你的

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

于 2012-07-13T12:45:48.463 回答
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 回答
0

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

 #bridgeDIV
{
position:relative;
}

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

想象一下桥下流淌的河流。

于 2013-03-13T09:04:38.633 回答