下另一个DIV

问题描述：

滚动与YouTube视频一个div我有我的HTML如下下另一个DIV

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

顶格（D1）是固定的。而滚动底部div（d2）落后顶部div。但YouTube视频留在上面。

我想把它放在顶部div。有没有办法？

答

这是我如何解决它。？

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

注意的wmode =透明”在IFRAME

答

问题可能在于iframe将闪存YouTube视频放在顶部。它与Flash对象的z索引有关。

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

http://manisheriar.com/blog/flash_objects_and_z_index

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

使用这个CSS：

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

编辑：您将不得不删除iframe中。首先，我们会想出一个好主意，因为iframes吸：p

我有尝试，但YouTube的iframe后添加wmode =“透明” – Manjoor 2012-07-16 08:18:31

答

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

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

或您可以添加wmode =“不透明”>您的标签，如阿迪的链接建议:) – Losbear 2012-07-13 12:48:52

我已经删除了iframe，并使用了的对象标签。但它没有效果 – Manjoor 2012-07-16 08:20:23

答

的SRC我试过，当我遇到类似的情况来了：

#bridgeDIV 
{ 
position:relative; 
} 

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

想象桥下河水流动

相关推荐