CSS 如何让 iframe 在 IE 中尊重 z-index？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8278390/
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
How can I make iframe respect z-index in IE?
提问by Valyrion
I have a youtube iframe element in my website, but it's next to my menu items. When I hover over a menu item, a submenu opens that partially covers the iframe (because of it's position, that's not it's specific function obviously). This works fine in Firefox, but as usual, it doesn't in IE, here the iframe covers the menu, making it basically unreadable. Is there an option I need to add to the iframe to make it work or is it just plain impossible?
我的网站中有一个 youtube iframe 元素，但它在我的菜单项旁边。当我将鼠标悬停在菜单项上时，会打开一个部分覆盖 iframe 的子菜单（因为它的位置，这显然不是它的特定功能）。这在 Firefox 中工作正常，但像往常一样，它在 IE 中不起作用，这里 iframe 覆盖了菜单，使其基本上不可读。是否有我需要添加到 iframe 的选项才能使其工作，还是根本不可能？
(Testing with IE9 at the moment)
（目前用IE9测试）
回答by box86rowh
Try using Youtubes iframe embed method (if thats not what you are already doing, and add: ?wmode=transparent to the url (replace ? with & if it is not the first url variable)
尝试使用 Youtubes iframe 嵌入方法（如果那不是你已经在做的，并添加： ?wmode=transparent 到 url （如果它不是第一个 url 变量，则将 ? 替换为 & ）
回答by Alvaro Prieto
There are several issues with this question. First of all, there is no problem in IE to set an iframe above or below other content in your document using z-index. Higher z-index makes your iframe above other elements, (as usual), as far as your iframe is positioned: relative, absolute or fixed.
这个问题有几个问题。首先，在 IE 中使用 z-index 在文档中其他内容的上方或下方设置 iframe 是没有问题的。就 iframe 的定位而言，较高的 z-index 使您的 iframe 高于其他元素（像往常一样）：相对、绝对或固定。
The real problem comes when the content of your iframe is a flash embedded object. In this case, the flash object can only be z-positioned if its wmode parameter is set to "transparent" or "opaque", but it will not work if the flash is included in the HTML document using wmode = "window".
当 iframe 的内容是 Flash 嵌入对象时，真正的问题就出现了。在这种情况下，flash 对象只能在 wmode 参数设置为“透明”或“不透明”的情况下进行 z 定位，但如果使用 wmode = "window" 将 flash 包含在 HTML 文档中，则它将不起作用。
So if you are including an external resource (in a website you don't have access, like youtube), you can only achieve it if any of those modes are used. If you are loading a flash object in a iframe in which you can modify its content, just check that:
因此，如果您要包含外部资源（在您无法访问的网站中，例如 youtube），则只有使用这些模式中的任何一种才能实现它。如果您在 iframe 中加载 Flash 对象，您可以在其中修改其内容，只需检查：
<param name="wmode" value="transparent" />
is set.
设置。
In case youtube is using "window" mode, you can always use your own flash player and hook youtube videos dynamically, setting your flash object mode to transparent.
如果 youtube 使用“窗口”模式，您始终可以使用自己的 Flash 播放器并动态挂接 youtube 视频，将您的 Flash 对象模式设置为透明。
回答by Anton Lyhin
I saw the similar issue, the default youtube link word should be embed,
我看到了类似的问题，应该嵌入默认的 youtube 链接词，
<iframe src="http://www.youtube.com/embed/video_id"></iframe>
but not just v-link (v-link ignores z-index):
但不仅仅是 v-link（v-link 忽略 z-index）：
<iframe src="http://www.youtube.com/v/video_id" frameborder="0"></iframe>
Here is an example for IE: http://jsfiddle.net/7fd8Y/21/
这是 IE 的示例：http: //jsfiddle.net/7fd8Y/21/
回答by JuanCarlosC
Here is a non pure JS solution, alternative to JQuery:
这是一个非纯 JS 解决方案，可以替代 JQuery：
var iFramesOnPage = document.getElementsByTagName("IFRAME");
for(var i = 0; i < iFramesOnPage.length; i++) {
var newiFrameURL = iFramesOnPage[i].getAttribute("src")+"?wmode=transparent";
iFramesOnPage[i].setAttribute("src", newiFrameURL);
};
