z-index 和 iFrames！

Posted 2023-03-13

【中文标题】z-index 和 iFrames！

【英文标题】：z-index and iFrames!

【发布时间】：2011-07-13 22:51:58

【问题描述】：

我正在为我网站的一些图像使用FancyBox 插件。在我的一个页面上，我还嵌入了来自 YouTube 的 iFrame 代码，用于在页面上放置视频。

在同一页面上是一个缩略图，当单击该缩略图时，FancyBoxes 图像。但是，嵌入的 YouTube 视频仍然覆盖 FancyBox 图像。我做了一些 z-index 实验，但仍然没有运气。

即使设置了 z-index 等，iFrame 是否对页面中的所有元素都具有优先级？

【问题讨论】：

你最好使用wmode=opaque你会得到更好的性能，详情在这里：***.com/q/886864/158014

【参考方案1】：

总之，是的。但是 Youtube 视频是 Flash。 Flash 还具有高于 Z 顺序的资历。它将覆盖它是否在 IFRAME 中。

IFRAME 和 Flash 是“重量级”对象。它们有自己的窗口管理器对象（Windows 中的 HWND），因此它们要么位于其他重量级对象的前面，要么位于它们后面。

div、span 等是“轻量级”。也就是说，它们是绘制对象，绘制到 Body（这是一个重量级对象）上，并由浏览器管理，而不是由窗口管理器管理。

就操作系统窗口管理器而言，它们只是浏览器绘制的漂亮图片。这就是为什么它们不能覆盖“真实”对象（或窗口管理器认为真实的对象）。

它们必须是轻量级的，因为如果每个 DIV 和 SPAN 和 A 都必须保留操作系统资源，它们会很快耗尽窗口管理器。

【参考方案2】：

如果您希望 Flash 小程序按照与任何其他 html 元素相同的 z-index 规则呈现，则需要为包含的 Flash 设置 WMODE 属性。

见：

http://www.communitymx.com/content/article.cfm?cid=E5141 differences between using wmode="transparent", "opaque", or "window" for an embedded object on a webpage

【讨论】：

嗯，这里的问题是我无法控制 Flash 元素。我基本上只是从仅包含 标签的 youtube 网站中提取嵌入的 iFrame HTML。所以我无法设置 WMODE 属性。

【参考方案3】：

添加 wmode=transparent 作为参数。

HTML 解决方案

<iframe title="YouTube video player" 
  
src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" 
frameborder="0"
>

jQuery 解决方案：

$(document).ready(function () 
    $('iframe').each(function()
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    );
);

来源http://www.scorchsoft.com/news/youtube-z-index-embed-iframe-fix

【讨论】：

你最好使用wmode=opaque你会得到更好的性能，详情在这里：***.com/q/886864/158014

HTML 解决方案适合我。可悲的是，jQuery 解决方案没有。谢谢！

@Zade：这可能是因为 url 已经包含一个问号。

if(url.indexOf("wmode")== -1) $(this).attr("src",url+"?wmode=opaque");

还检查是否有任何 jquery 像 CMS 通常设置的 NoConflict = true 一样工作，因此您必须设置 $ var。 jQuery(document).ready(function () var $ = jQuery;

【参考方案4】：

非常简单，只需将这个参数添加到你的 iframe url 就可以了：

<iframe title="YouTube video player"   src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">

祝你好运！

【讨论】：

您已将属性wmode="Opaque" 添加到iframe 元素。我试着用谷歌搜索。我不认为这有任何意义。 url中的查询有意义，但属性没有——如果我弄错了，请纠正我。

【参考方案5】：

要使其在 IE（至少 7 和 8）中工作，您必须添加以下内容：

<param name="wmode" value="transparent" />

我不相信有办法将它附加到 iframe URL，所以你的内容需要有这个，可能在对象标签之间。

【参考方案6】：

嗯，这里的问题是我无法控制 Flash 元素。我基本上只是从仅包含标签的 youtube 网站中提取嵌入的 iFrame HTML。所以我无法设置 WMODE 属性。

迟到的答案，但是：是的，你可以。只需将 ?wmode=opaque 添加到 yt 网址即可。

<iframe src="http://www.youtube.com/embed/vRH3Kq5qDw4?wmode=opaque".............