z-index 和 iframe 问题 - 下拉菜单

Question

嘿。我的下拉菜单和 iframe 有一个相当令人费解的问题。

我已将 1000 的 z 索引应用于下拉菜单，但是包含 youtube 视频的 iframe 仍然出现在菜单上方。请自行查看以下内容（检查“短代码”菜单）：

http://www.matthewruddy.com /demo/?page_id=765

我不明白这是为什么。有人可以帮我吗？如果有帮助的话，这是 CSS：

#jquery-dropdown {
position: absolute;
bottom: 0;
right: 10px;
}

#jquery-dropdown ul {
margin: 0;
padding: 0;
list-style: none;
}

#jquery-dropdown ul li {
margin: 0;
padding: 15px 10px 15px 10px;
position: relative;
float: left;
}

#jquery-dropdown ul li a {
display: block;
text-decoration: none;
font-weight: bold;
font-size: 13px;
color: #707070;
outline: none;
}

#jquery-dropdown ul li ul {
position: absolute;
left: -10px;
top: 46px;
display: none;
background: #f4f4f4;
border: 1px solid #e1e1e1;
border-top: none;
z-index: 1000;
padding: 5px 0;
-moz-box-shadow: 1px 2px 3px #a4a4a4;
-webkit-box-shadow: 1px 2px 3px #a4a4a4;
box-shadow: 1px 2px 3px #a4a4a4;
}

#jquery-dropdown ul li ul li {
margin: 0;
padding: 0;
float: none;
position: relative;
z-index: 1000;
}

#jquery-dropdown ul li ul li a {
width: 180px;
padding: 10px;
z-index: 1000;
}

#jquery-dropdown ul li ul li a:hover {
background: #e0e0e0;
}

Answer 1

如果您想继续使用嵌入 Youtube 视频的 iframe 方法，只需通过查询变量 ?wmode=transparent 设置 WMODE 即可。下面是一个示例：

<iframe width="580" height="435" src="http://www.youtube.com/embed/fCH7B9m4A4M" frameborder="0" allowfullscreen></iframe>

将变为：

<iframe width="580" height="435" src="http://www.youtube.com/embed/fCH7B9m4A4M?wmode=transparent" frameborder="0" allowfullscreen></iframe>

请记住检查 Youtube URL 中是否存在任何已存在的查询变量。如果已经有 ?something... 将 ?wmode=transparent 更改为 &wmode=transparent 并将其粘在末尾。

Answer 2

我将使用

<object width="640" height="385"><param name="wmode" value="transparent"></param><param name="movie" value="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>

这里有一些更多信息

Answer 3

如果 ?wmode=transparent 不起作用，请尝试切换为不透明。这对我来说有效。

样本：

(function ($) {
    $ = jQuery;

    $(function () {
        $video = $("#SomeWrapper> iframe");
        $srcVal = $video.attr('src');
        appendedVal = $srcVal + "?wmode=opaque";
        $video.attr('src',appendedVal);
    });
 })(jQuery);

Answer 4

在我的机器（Windows 7 上的 Chrome）上，显示 YouTube 视频的插件是与浏览器内容窗口不同的本机窗口。我认为当插件以这种方式运行时，它会在浏览器中的任何其他内容之上呈现，忽略 CSS z-index 值。

Silverlight 插件有一个设置，可以使其在浏览器内容窗口而不是其自己的本机窗口中运行。您可以尝试为嵌入式 YouTube 播放器找到类似的设置。

Answer 5

Flash 并不总是能在所有浏览器上与 z-index 配合良好，但在我的 Firefox 上看起来很好。 http://manisheriar.com/blog/flash_objects_and_z_index <<我认为这可能是您正在寻找的解决方案。

编辑

为什么 IE 中的 Z-Index 不能按照 Flash 影片应有的方式渲染？ << stackoverflow 上有类似的问题

Answer 6

这是一个 iframe 问题，而不是 z-index 。我遇到的同样问题，我只是将 ?wmode=transparent 添加到 YouTube 嵌入 i 框架 src url 中。就像这样：

 <div class="tube_box">
          <iframe width="500" height="300" src="https://www.youtube.com/embed/ngKxlkoZBLA**?wmode=transparent**" frameborder="0" allowfullscreen ></iframe>
    </div>

It Works in all browser IE,Firefox and chrome 

Here My Css :


.tube_box{
    float:left;
    width:515px;
    border:5px groove #d1e7ed;
    border-radius:11px;
    margin-bottom:10px;
    color:#b8b8bf;
    padding:10px; 
    z-index: 1000 ;

}


If you add the position:relative,absolute or anything again the drop down hiding.So avoid position its better.Another thing is  not important  to add the z-index,Without z-index also it will work .Hope so it will really helpful for you