z-index和iFrames!

Question

我正在使用FancyBox插件来访问我网站的一些图片.在我的一个页面上,我还有来自YouTube的嵌入式iFrame代码,用于在页面上放置视频.

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

即使使用z-index设置等,iFrame是否具有页面中所有元素的资历？

Answer 1

添加wmode = transparent作为参数.

Html解决方案

<iframe title="YouTube video player" 
width="480" height="390" 
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

Answer 2

总之,是的.但Youtube视频是Flash.Flash也拥有Z-order的资历.它将覆盖它是否在IFRAME中.

IFRAME和Flash是"重量级"对象.它们有自己的Window Manager对象(Windows中的HWND),因此它们位于其他重量级对象之前或之后.

div,span等都是"轻量级".也就是说,它们是绘制的对象,绘制在Body(这是一个重量级的对象)上,并由浏览器管理,而不是窗口管理器.

就操作系统窗口管理器而言,它们只是浏览器绘制的漂亮图片.这就是为什么他们不能覆盖"真实"对象(或窗口管理器认为是真实的).

它们必须是轻量级的,因为如果每个都会快速耗尽窗口管理器DIV,SPAN并且A必须保留OS资源.