我写了一个div,position:absolute,z-index:9999,点击播放器全屏后,还是能挡住我的元素,为什么呢,怎么才能在其之上显示
估计提主是用flash实现的视频播放吧?
先解答问题,「为什么视频播放器总是在所有元素之上?」
因为 Flash 控件 默认 融合(wmode)模式为 window,即 Flash 控件永远悬浮于其余元素之上。
题外,「如何解决?」
给 flash 所在 embed
标签 添加 wmode
属性
设置 融合模式 为 transparent(透明) 或 opaque(层级)
!当flash控件的 wmode 设置为 transparent 时,很大几率会导致性能问题
在 transparent 模式下 flash player会设置舞台(stage)背景为透明,并渲染实际需显示的画面以 rgba模式 交给浏览器渲染(融合其下元素)
导致每次画面变动都是一次 Flash player 与 浏览器之间的交互,于是和 opaque 模式相比 transparent 模式需要占用的资源更多。尤其是在视频播放的情况下!
于是,
不需要对旧版本IE兼容的话推荐设置 wmode="opaque" 即可设置控件加入HTML层级 (即可用HTML渲染顺序以及z-index控制层级)
<embed src="one.swf" wmode="opaque" type="application/x-shockwave-flash">
object情况
<object type="application/x-shockwave-flash">
<param name="movie" value="one.swf">
<param name="wmode" value="opaque">
</object>
引用
http://www.adobe.com/cn/devnet/flash/articles/concept_window_mode.html
说的不是很明确,你指的视频播放器是activeX还是Flash?
你确定你要写的不是z-index:-9999;
???!!!!
楼主应该指的是 网页中的flash播放器,这个涉及到的浏览器的渲染问题,flash播放器使用的是单独的flash进行进行渲染,渲染出来的其实是一个和浏览器等级一样的window窗口,你可以用spy ++ 抓下,其实就是个窗口,没有的话可以用qq的截图工具试下,你会发现截图工具会自动帮你识别出来那个窗口,这个可以用过设置 object 或者embed标签的 wmode 调整渲染的模式:
- window 模式
- 默认情况下的显示模式,在这种模式下flash
player有自己的窗口句柄,这就意味着flash影片是存在于Windows中的一个显示实例,并且是在浏览器核心显示窗口之上的,所以flash只是貌似显示在浏览器中,但这也是flash最快最有效率的渲染模式。由于他是独立于浏览器的HTML渲染表面,这就导致默认显示方式下flash总是会遮住位置与他重合的所有DHTML层。但是大多数苹果电脑浏览器会允许DHTML层显示在flash之上,但当flash影片播放时会出现比较诡异的现象,比如DHTML层像被flash刮掉一块一样显示异常。
- 默认情况下的显示模式,在这种模式下flash
- Opaque 模式
- 这是一种无窗口模式,在这种情况下flash player没有自己的窗口句柄,这就需要浏览器需要告诉flash
player在浏览器的渲染表面绘制的时间和位置。这时flash影片就不会在高于浏览器HTML渲染表面而是与其他元素一样在同一个页面上,因此你就可以使用z-index值来控制DHTML元素是遮盖flash或者被遮盖。
- 这是一种无窗口模式,在这种情况下flash player没有自己的窗口句柄,这就需要浏览器需要告诉flash
- Transparent 模式
- 透明模式,在这种模式下flash
player会将stage的背景色alpha值将为0并且只会绘制stage上真实可见的对象,同样你也可以使用z-index来控制flash影片的深度值,但是与Opaque模式不同的是这样做会降低flash影片的回放效果,而且在9.0.115之前的flash player版本设置wmode=”opaque”或”transparent”会导致全屏模式失效。
- 透明模式,在这种模式下flash