Html z-index 和 iFrames！
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5281002/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
z-index and iFrames!
提问by cqde
I'm using the FancyBoxplugin for some of my site's images. On one of my pages, I also have the embedded iFrame code from YouTube to place a video on the page.
我正在将FancyBox插件用于我网站的一些图像。在我的一个页面上，我还有来自 YouTube 的嵌入式 iFrame 代码，用于在页面上放置视频。
On this same page is a thumbnail that, when clicked, FancyBoxes the image. However, the embedded YouTube video still lays over the FancyBox image. I did a bit of z-index experimenting and still no luck.
在同一页面上有一个缩略图，当点击时，FancyBoxes 图像。但是，嵌入的 YouTube 视频仍然位于 FancyBox 图像上。我做了一些 z-index 实验，但仍然没有运气。
Does an iFrame have seniority over all elements in a page even with z-index set, etc.?
即使设置了 z-index 等，iFrame 是否对页面中的所有元素都具有优先级？
回答by Simonini
Add wmode=transparentas param.
添加wmode=transparent作为参数。
Html solution
html解决方案
<iframe title="YouTube video player"
width="480" height="390"
src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent"
frameborder="0"
>
jQuery solution:
jQuery 解决方案：
$(document).ready(function () {
$('iframe').each(function(){
var url = $(this).attr("src");
$(this).attr("src",url+"?wmode=transparent");
});
});
Source http://www.scorchsoft.com/news/youtube-z-index-embed-iframe-fix
来源http://www.scorchsoft.com/news/youtube-z-index-embed-iframe-fix
回答by Ben
In a word, yes. However Youtube videos are Flash. Flash also has seniority over the Z-order. It will overlay whether it is in an IFRAME or not.
一句话，是的。但是 Youtube 视频是 Flash。Flash 也比 Z-order 更有资历。无论它是否在 IFRAME 中，它都会覆盖。
IFRAME and Flash are "heavyweight" objects. They have their own Window Manager objects (HWND in Windows), so they are either in front of other heavyweight objects or behind them.
IFRAME 和 Flash 是“重量级”对象。它们有自己的窗口管理器对象（Windows 中的 HWND），因此它们要么位于其他重量级对象的前面，要么位于它们的后面。
div, span, etc are "lightweight". That is they are drawn objects, drawn onto the Body (which is a heavyweight object), and managed by the browser, not the window manager.
div, span, 等是“轻量级的”。也就是说，它们是绘制对象，绘制到 Body（这是一个重量级对象）上，并由浏览器管理，而不是窗口管理器。
As far as the operating system window manager is concerned, they are just pretty pictures drawn by the browser. That's why they cannot overlay "real" objects (or what the window manager thinks of as real).
就操作系统窗口管理器而言，它们只是浏览器绘制的漂亮图片。这就是为什么它们不能覆盖“真实”对象（或窗口管理器认为真实的对象）的原因。
They have to be lightweight because they would rapidly exhaust the window manager if every DIVand SPANand Ahad to reserve OS resources.
它们必须是轻量级的，因为它们会迅速耗尽窗口管理器DIV，SPAN并且A必须保留操作系统资源。
回答by DuckMaestro
If you want the Flash applet to be rendered according to the same z-index rules of any other HTML element, then you need to set the WMODE attribute for the included flash.
如果希望 Flash 小程序按照与任何其他 HTML 元素相同的 z-index 规则呈现，则需要为包含的 Flash 设置 WMODE 属性。
See:
看：
回答by DomingoSL
Is very simple, just add this parameters to your iframe url and thats it:
非常简单，只需将此参数添加到您的 iframe url 中即可：
<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">
Good luck!
祝你好运！
回答by Calydon
To get this to work in IE (at least 7 and 8) you must add this:
要使其在 IE 中工作（至少 7 和 8），您必须添加以下内容：
<param name="wmode" value="transparent" />
I don't believe there is a way to append this to the iframe URL so your content needs to have this, probably between object tags.
我不相信有一种方法可以将它附加到 iframe URL，因此您的内容需要具有它，可能在对象标签之间。
回答by matt
Hmm, the problem here is that I don't have control over the flash elements. I'm basically just pulling the embedded iFrame HTML from the youtube site which only contains the tags. So I can't set the WMODE attribute.
嗯，这里的问题是我无法控制 flash 元素。我基本上只是从仅包含标签的 youtube 站点中提取嵌入的 iFrame HTML。所以我无法设置 WMODE 属性。
Late answer but: yes you can. Just tack ?wmode=opaque onto the yt url.
迟到的答案但是：是的，你可以。只需将 ?wmode=opaque 添加到 yt 网址上即可。
<iframe src="http://www.youtube.com/embed/vRH3Kq5qDw4?wmode=opaque".............
