CSS overflow 属性
定义和用法:overflow 属性规定当内容溢出元素框时发生的事情。
div
{
150px;
height:150px;
overflow:scroll;
}
可能的值
值 描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
------------------------------------------------------------------------------------------------------
视频播放器总是在所有元素之上?
因为 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>
可以用过设置 object 或者embed标签的 wmode 调整渲染的模式:
window 模式
默认情况下的显示模式,在这种模式下flash
player有自己的窗口句柄,这就意味着flash影片是存在于Windows中的一个显示实例,并且是在浏览器核心显示窗口之上的,所以flash只是貌似显示在浏览器中,但这也是flash最快最有效率的渲染模式。由于他是独立于浏览器的HTML渲染表面,这就导致默认显示方式下flash总是会遮住位置与他重合的所有DHTML层。但是大多数苹果电脑浏览器会允许DHTML层显示在flash之上,但当flash影片播放时会出现比较诡异的现象,比如DHTML层像被flash刮掉一块一样显示异常。
Opaque 模式
这是一种无窗口模式,在这种情况下flash player没有自己的窗口句柄,这就需要浏览器需要告诉flash
player在浏览器的渲染表面绘制的时间和位置。这时flash影片就不会在高于浏览器HTML渲染表面而是与其他元素一样在同一个页面上,因此你就可以使用z-index值来控制DHTML元素是遮盖flash或者被遮盖。
Transparent 模式
透明模式,在这种模式下flash
player会将stage的背景色alpha值将为0并且只会绘制stage上真实可见的对象,同样你也可以使用z-index来控制flash影片的深度值,但是与Opaque模式不同的是这样做会降低flash影片的回放效果,而且在9.0.115之前的flash player版本设置wmode=”opaque”或”transparent”会导致全屏模式失效。
------------------------------------------------------------------------------------------------------