在网页上嵌入 youtube 视频时如何避免 div 重叠？答案

【问题标题】：How to avoid div overlapping when embiding a youtube video on a webpage?在网页上嵌入 youtube 视频时如何避免 div 重叠？
【发布时间】：2011-11-10 14:59:06
【问题描述】：

使用这两种方法嵌入来自youtube的视频，iframe：

<iframe width="400" height="300" src="http://www.youtube.com/embed/2D_AU8-2QWY?rel=0" frameborder="0" allowfullscreen></iframe>

和旧的：

<object width="400" height="300"><param name="movie" value="http://www.youtube.com/v/RNclwz9B_GQ?version=3&amp;hl=it_IT&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/RNclwz9B_GQ?version=3&amp;hl=it_IT&amp;rel=0" type="application/x-shockwave-flash" width="400" height="300" allowscriptaccess="always" allowfullscreen="true"></embed></object>

我的 div 上总是出现难看的重叠效果，像这样：

所以问题是如何避免这种情况？谢谢！

【问题讨论】：

您是想将其放在登录后面还是将其固定到页面上的 1 个位置？
它必须在一切的背后
是所有浏览器还是特定浏览器都会出现这种情况？

标签： html css

【解决方案1】：

尝试在 css 中使用z-index 来订购您的 div，这样您就可以选择最上面的内容

https://developer.mozilla.org/en/CSS/z-index

【讨论】：

似乎 z-index 与问题无关。注意第三个屏幕截图。叠加层小部件通常具有非常高的 z-index。

【解决方案2】：

添加 1ftw1 的答案；要允许在 Flash 内容上设置 z-index，您需要包含 wmode 参数

来自Adobe's site：

wmode - 可能的值：窗口、直接、不透明、透明、gpu。设置 Flash 影片的 Window Mode 属性以在浏览器中进行透明度、分层、定位和渲染。如果省略此属性，则默认值为“窗口”。有关详细信息，请参阅下面的使用窗口模式 (wmode) 值。
窗口 - SWF 内容在网页上的自己的矩形（“窗口”）中播放。浏览器将确定 SWF 内容如何与其他 HTML 元素分层。使用此值，您无法明确指定 SWF 内容是显示在页面上其他 HTML 元素之上还是之下。
direct - 使用直接路径呈现。这会绕过屏幕缓冲区中的合成，并将 SWF 内容直接呈现到屏幕上。建议使用此 wmode 值，以便为内容播放提供最佳性能，并启用使用 Stage Video 或 Stage 3D 的 SWF 内容的硬件加速演示。
不透明 - SWF 内容与其他 HTML 分层页面上的元素。 SWF 是不透明的，将隐藏页面上它后面的所有内容。与 wmode=window 或 wmode=direct 相比，此选项会降低播放性能。
透明 - SWF 内容与页面上的其他 HTML 元素分层。 SWF 背景颜色（舞台颜色）是透明的，SWF 下的 HTML 元素将通过 SWF 的任何透明区域可见，并带有 alpha 混合。与 wmode=window 或 wmode=direct 相比，此选项会降低播放性能。
gpu - 在某些连接互联网的电视和移动设备上使用额外的硬件加速。与其他 wmode 值相比，不能保证显示列表图形的像素保真度。否则，此值类似于 wmode=direct。

【讨论】：