z-index和iframe问题 – 下拉菜单
嘿。 我的下拉菜单和iframe有一个相当令人费解的问题。
我已将z-index 1000应用于下拉菜单，但包含youtubevideo的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; } 我会使用标签而不是iframe来嵌入youtubevideo。 然后，我会在使用 。 像这样的东西：
这是一些更多的信息
如果你想继续使用嵌入Youtube vids的iframe方法，你可以简单地通过查询变量设置WMODE ?wmode=transparent 。 这是一个例子：
会成为：
请记住检查Youtube URL是否存在任何查询变量。 如果已经有了?something...改变?wmode=transparent到&wmode=transparent并在最后添加它。
如果？wmode = transparent不起作用，请尝试切换到opaque。 这在我的情况下有效。
样品：
(function ($) { $ = jQuery; $(function () { $video = $("#SomeWrapper> iframe"); $srcVal = $video.attr('src'); appendedVal = $srcVal + "?wmode=opaque"; $video.attr('src',appendedVal); }); })(jQuery);
在我的计算机上（Windows 7上的Chrome），显示YouTubevideo的插件是与浏览器内容窗口不同的本机窗口。 我认为当插件以这种方式运行时，它会在浏览器中的任何其他内容之上呈现，而忽略CSS z-index值。
Silverlight插件有一个设置，使其在浏览器内容窗口中运行，而不是在其自己的本机窗口中运行。 您可以尝试为嵌入的YouTube播放器找到类似的设置。
在所有浏览器上，Flash并不总能与z-index一起使用，从我的Firefox看起来很好。 http://manisheriar.com/blog/flash_objects_and_z_index <<我认为这可能是您正在寻找的解决方案。
编辑
为什么IE中的Z-Index没有呈现出它应该通过Flash电影的方式？ << stackoverflow上的类似问题
这是一个iframe问题而不是z-index。我面临的问题我只是将“wmode = transparent”添加到YouTube嵌入i frame src url。 像这样：
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