[HTML/CSS]div显示在object、embed之上~

引言

帮一个朋友弄前端布局,一切都正常,但是嵌入object之后,div总是在object的下面,就上网找了一下解决方案,这里记录一下,好像只对flash有效。

用embed插入一个flash(比如优酷的视频),结果总是能把其它元素盖住。把其它元素的z-index改成巨大都没用。
现有的解决方案是在插入flash的embed或object标签中加入”wmode”属性并设置为wmode=“transparent”或”opaque”,但wmode属性到底是什么意义,为什么可以解决这个问题呢?
window mode(wmode)
wmode即窗口模式总共有三种,看看当年Macromedia官方的说法:window模式,Opaque模式,Transparent模式

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”会导致全屏模式失效。

总结

添加一个wmode="transparent"属性或者 wmode="opaque"属性 即可推荐使用wmode="opaque" 因为wmode="transparent"会影响flash的性能.

原文地址:http://shicaolang1990.blog.163.com/blog/static/20391507720136124128715/

博客地址: http://www.cnblogs.com/wolf-sun/
博客版权: 本文以学习、研究和分享为主,欢迎转载,但必须在文章页面明显位置给出原文连接。
如果文中有不妥或者错误的地方还望高手的你指出,以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下!如果你有更好的建议,不如留言一起讨论,共同进步!
再次感谢您耐心的读完本篇文章。

转载:http://www.cnblogs.com/wolf-sun/p/3830324.html

时间: 2024-10-29 21:30:05

[HTML/CSS]div显示在object、embed之上~的相关文章

怎么让div显示在object flash

  天做了一个菜单按钮,鼠标移至按钮,出现下拉子菜单的功能.实现方式是将子菜单放入了一个div中,给菜单按钮添加hover函数.但是菜单按钮下面有一个div,里面是一个object标签,放入的是flash动画.当鼠标移至菜单按钮时,子菜单的div出现了,但是被object动画给遮挡住而无法显示.在网上搜了搜,大部分解决方式都不大给力.在此推荐一种比较可行而且最简单的方法:在object标签中添加<param name="wmode" value="transparent

div+css网页显示不完整的原因分析及解决方案

常常在低版本的浏览器如IE6查看一个网页显示完整,而在IE7及以上版本浏览器.火狐等浏览器上内容显示不完整-DIV+CSS网页内容显示不完整诊断教程. 样式截图如下:       说明:最后一排的内容文字只显示了一半. 分析造成原因: 1.css中设置了高度 2.设置了css样式表属性overflow:hidden,隐藏超出指定宽度.高度的对象-css隐藏. 解决方法: 1.css中设置了高度 取消其对象的高度(height)css样式,即可兼容各浏览器,内容也会显示完整.如果取消了高度让网页布

用GoLive实现CSS+DIV之一

css 在可视化CSS编辑器方面,GoLive在版本6已经成型,其设计构思甚至成为许多专业CSS编辑器模仿的对象,如众所周知的TopStyle.近来随着中文版GoLive的发布,引发了业内网页制作软件之争.面对这个在国内几乎是一夜之间出现的新面孔,许多人开始关注.我曾发表过有关GoLive将在网页制作方面取代DreamWeaver的评论,预计后者将转型为数据库开发组件.这是因为DreamWeaver在数据库方面非常优秀,但在可视化网页编辑方面早已落后(应该说不曾领先).只是凭借着中文化优势占领着

div css标签:CSS+div 常用标签

最近在做网页的项目 很多东西都忘记了  我整理一下CSS+div 常用标签 希望可以帮助我和大家共同学习一下 先把整个网站构架起来才是基础,下一步才是加入jsp和Ajax.CSS中的长度 绝对单位:几乎不用在网页中 in 英寸      1in = 2.54cm cm 厘米    1cm = 0.394in pt 磅        1in = 72pt pc pica      1in = 6pc 相对单位:较常用 em   1em = 相应字体的font-size值 ex    1ex = 相

jquery简单的div显示和隐藏特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

javascript-js怎么把左边的div显示在右边的

问题描述 js怎么把左边的div显示在右边的 js怎么把左边的div显示在右边的,不要框架,也不要显示隐藏,如何做到呢? 解决方案 让DIV在鼠标右边显示js固定div在屏幕最右边JS从左边移动到右边 解决方案二: 你可以设置div的位置啊!让它在右边 解决方案三: 通过css的style去设置 解决方案四: 问的什么问题,完全看不懂.div要左右排列用float或者直接position absolute定位,爱放哪就放哪..

用js控制div显示位置

问题描述 在编程时,我把div放到了form后面.可是运行显示时得显示在form之前,请高手帮忙!源码://form用这个div来布局<formname="jlxForm1"><divstyle="width:100%;"></div></form>//下面是要显示的div,怎么把这个div显示在form的前面啊????<divid="dhtmlgoodies_slidedown_selfDefined

精通CSS+DIV网页样式与布局--图片效果

        提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过照片处理软件轻松实现自己想要的照片效果.这篇博客,小编将继续来总结CSS+DIV的其她效果来进行分析,有兴趣的小伙伴可以点击以下链接,了解小编之前讲解过的关于CSS的一些基础知识:         精通CSS+DIV网页样式与布局--初探CSS        精通CSS+DIV网页样

html-HTML关于CSS+DIV浮动的一个疑问

问题描述 HTML关于CSS+DIV浮动的一个疑问 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> </title> <style> #div1 { width:400px; height:300px; backgroun