CSS下拉导航菜单被视频挡住问题解决

今天工作的时候，遇到一个客户需要修改的问题：DIV下拉菜单被视频挡住。

我想在做网页前台的时候，很多朋友都会遇到这样的问题：

1. Div层被flash挡住。

2. Div层被Select挡住。

3. Div层被视频文件挡住。

前两个问题，有很容易的方法去解决，在这里我就不讲解了。第三个问题，是个很麻烦的事情，接到这个修改后，当时就觉得情况不乐观，会花掉不少的时间。

在网上找了很多资料，最常见的是说用iframe来解决；也许是我的方法不对吧，我在测试的时候用<iframe src="包含视频的静态页"....></iframe>也无法达到效果，Div层依然会被挡住。

怎么解决呢？呵呵，不卖关子了，将代码放在下面，希望能给大家一个参考：


<div style="position: relative; width: *; height: *; overflow:hidden;">

<embed src="视频文件地址" width="*" height="*" WindowlessVideo="1"></embed>

</div>



首先： WindowlessVideo="1"，这个很重要，这个参数的具体意思，大家可以在网上找参考资料，这里我不详述了。通过增加这个参数，在IE系列的浏览器下，都可以让Div层正常的显示在视频文件上方了。



其次：style="position: relative; width: *; height: *; overflow:hidden;"，为什么要增加这一个呢？其实我也不知道为什么要加这个，当初在IE下测试成功的时候，发现在FF下会再现两个视频画面，一个是动的，而另一个是静止的，而静止的画面会随着下拉菜单的切换而变化（有点类似PrintScreen的感觉）。在FF下可以充分理解WindowlessVideo是什么意思了。所以，我就萌发了用div来包含<embed...></embed>，再给他一个相对定位（绝对定位我没测试），然后保险起见，顺便定义了宽度、高度及溢出（是否必要，没经测试）。

------------------------------------------------------------
网上很多关于flash挡住DIV层的解决方法，绝大部分提供的方法都只能解决IE下的情况， Firefox下问题依然存在。总算是黄天不负有心人啊！终于找到了解决方法,也难得去研究是怎么回事，总之是flash参数的问题，并非设置什么DIV 的z-index=-1之类的，下面则是解决IE和Firefox下flash挡住div层的flash解决方法
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="https://www.360docs.net/doc/7f15001598.html,/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100％" height="80">
<param name="movie" value="flash url" />
<param name="quality" value="high" />
<param name="wm

ode" value="transparent">
<embed wmode="transparent" src="flash url quality="high" type="application/x-shockwave-flash"
pluginspage="https://www.360docs.net/doc/7f15001598.html,/go/getflashplayer" width="100％" height="80"></embed>
</object>
重要的地方就2点:
1、<param name="wmode" val
ue="transparent">
很常用flash做为背景的命令,在这里就不罗嗦了。如果不加Firefox没问题,IE就会挡住DIV层显示。
2、<embed wmode="transparent">
重点在这里,在<embed>中加入wmode="transparent"属性,Firefox中层的问题就迎刃而解。