z-index和iframe问题 - 下拉菜单 [英] z-index and iframe issue - dropdown menu

问题描述

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

Hey. Having a rather puzzling issue with my dropdown menus and iframes.

我在下拉菜单中应用了z-index为1000，但是包含youtube视频的iframe仍然出现在菜单上方。请在下面查看（查看短代码菜单）：

I have applied a z-index of 1000 to the dropdown menus, however the iframe containing the youtube video still appears above the menu. See for yourself below (check the 'shortcodes' menu):

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

我无法弄清楚为什么会这样。谁能帮我吗？如果它有帮助，这是CSS：

I cannot figure out why this is. Can anyone help me out? Here is the CSS if it helps:

#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;
}

推荐答案

我会使用嵌入式youtube视频使用< object> 标记，而不是iframe。然后，我会在< object> < param name =wmodevalue =transparent> $ C>。这样的事情：

I would use the embedding of the youtube video using the <object> tag and not Iframe. Then, I would use the <param name="wmode" value="transparent"> inside the <object>. Something like this:

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

这是更多信息

这篇关于z-index和iframe问题 - 下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！