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

前端之家收集整理的这篇文章主要介绍了jquery – z-index和iframe问题 – 下拉菜单前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
嘿.我的下拉菜单和iframe有一个相当令人费解的问题.

我已将z-index 1000应用于下拉菜单,但包含youtube视频的iframe仍显示菜单上方.请在下方查看(查看“短代码菜单):

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

我无法弄清楚为什么会这样.谁能帮我吗?如果它有帮助,这是CSS:

  1. #jquery-dropdown {
  2. position: absolute;
  3. bottom: 0;
  4. right: 10px;
  5. }
  6.  
  7. #jquery-dropdown ul {
  8. margin: 0;
  9. padding: 0;
  10. list-style: none;
  11. }
  12.  
  13. #jquery-dropdown ul li {
  14. margin: 0;
  15. padding: 15px 10px 15px 10px;
  16. position: relative;
  17. float: left;
  18. }
  19.  
  20. #jquery-dropdown ul li a {
  21. display: block;
  22. text-decoration: none;
  23. font-weight: bold;
  24. font-size: 13px;
  25. color: #707070;
  26. outline: none;
  27. }
  28.  
  29. #jquery-dropdown ul li ul {
  30. position: absolute;
  31. left: -10px;
  32. top: 46px;
  33. display: none;
  34. background: #f4f4f4;
  35. border: 1px solid #e1e1e1;
  36. border-top: none;
  37. z-index: 1000;
  38. padding: 5px 0;
  39. -moz-Box-shadow: 1px 2px 3px #a4a4a4;
  40. -webkit-Box-shadow: 1px 2px 3px #a4a4a4;
  41. Box-shadow: 1px 2px 3px #a4a4a4;
  42. }
  43.  
  44. #jquery-dropdown ul li ul li {
  45. margin: 0;
  46. padding: 0;
  47. float: none;
  48. position: relative;
  49. z-index: 1000;
  50. }
  51.  
  52. #jquery-dropdown ul li ul li a {
  53. width: 180px;
  54. padding: 10px;
  55. z-index: 1000;
  56. }
  57.  
  58. #jquery-dropdown ul li ul li a:hover {
  59. background: #e0e0e0;
  60. }

解决方法

我会使用< object>来嵌入youtube视频.标签而不是iframe.然后,我会使用< param name =“wmode”value =“transparent”>在< object>内像这样的东西:
  1. <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>

Here is some more info

猜你在找的jQuery相关文章