[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/
[HTML/CSS]div显示在object、embed之上~的更多相关文章
- Jquery:怎样让子窗体的div显示在父窗体之上
<1> js或者jQuery訪问页面中的框架iframe. 注意:框架内的页面是不能跨域的! 如果有两个页面,在同样域下. 如果:父窗体 index.html ,有id 为 subif ...
- 基于CSS+dIV的网页层,点击后隐藏或显示
一个基于CSS+dIV的网页层,用JavaScript结合Input按钮进行控制,点击后显示或隐藏,网页上常用到的特效之一,实用性较强,相信对大家的前端设计有帮助. <!DOCTYPE html ...
- div 显示滚动条的CSS代码
div 显示滚动条的CSS代码 div显示上下左右滚动条 <div style="width:260px;height:120px; overflow:scroll; border ...
- CSS+DIV实现文字一行内显示,并且过多的文字以点来代替
有些时候我们在使用CSS+DIV进行排版实现大量的文字的时候,为了页面的美观,这里需要将文字在div中一行显示,并且将过多的文字进行隐藏,以点号进行代替.当鼠标放上面的时候会以title的形式显示所有 ...
- css控制div显示/隐藏方法及2种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- Object 标签遮挡 Div 显示
最近在使用 Object 时,就是播放视频的 Object 标签遮挡住其他 div 标签,不能正常显示. 出现这种现象的原因: object 标签不在 dom 文档流里面,浏览器在解析的时候先把 ob ...
- jQuery改变CSS使DIV显示
HTML: <div id="mazey" style="display:none;">www.mazey.net</div> jQue ...
- CSS——div内文字的溢出部分用省略号显示
使得div内文字的溢出部分用省略号显示,可归纳为两种解决办法,一种方法是用CSS解决,另一种方法是js解决. 一.通过CSS控制显示 div内显示一行,超出部分用省略号显示 div内显示多行,超出部分 ...
- (转)CSS+DIV float 定位
来自:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能 ...
随机推荐
- 【LabVIEW技巧】代码块快速放置
前言 之前的文章中介绍了如何使用QuickDrop来实现快速代码放置,今天我们来详细的聊一下如何进行代码块的快速放置. 正文 LabVIWE程序设计中,我们在架构层级总是进行重复性的编写.举一个例子: ...
- windows下使用github
1.首先到github.com注册用户: 2.下载git,地址:http://pan.baidu.com/s/1skPpWlB(64位下载):http://pan.baidu.com/s/1skOAa ...
- 步骤一:下载jdk并安装和配置java环境变量
1.下载JDk地址: http://download.eclipse.org/oomph/jre/?vm=1_1_7_0_64_0 2.进入下载页面(下载的是jdk7),点击:Oracle JDK1. ...
- spring mvc3+默认首页设置问题
web.xml配置: <servlet-mapping> <servlet-name>dispatcher</servlet-name> <url-patte ...
- C# Merge into的使用详解
Merge是一个非常有用的功能,类似于Mysql里的insert into on duplicate key. Oracle在9i引入了merge命令, 通过这个merge你能够在一个SQL语句中对一 ...
- .net 杂项
vs 打印信息到输出窗口 : System.Diagnostics.Debug.WriteLine("打印信息到输出窗口,但是只能在Debug版本运行,到了release版本中,Debug类 ...
- 01 java 基础:jdk jre path classpath 相关问题
JRE : Java 运行环境 JDK : Java 开发工具包,其中包括 JRE (javac.java.javap.jar.javadoc .javah 等命令) JVM : Java 虚拟机 ...
- 前端读者 | 百度前端编码规范(HTML)
本文来自:百度FEX 1 前言 HTML 作为描述网页结构的超文本标记语言,在百度一直有着广泛的应用.本文档的目标是使 HTML 代码风格保持一致,容易被理解和被维护. 2 代码风格 2.1 缩进与换 ...
- bzoj 2938 AC自动机 + dfs判环
#include<bits/stdc++.h> #define LL long long #define ll long long #define fi first #define se ...
- Mybatis框架-1
1.Mybatis框架: Mybatis是一个半自动的对象关系映射(ORM),实现结果集的自动封装,sql写到配置文件中: Mybatis使用的是DTD约束. 2.Mybatis模块调用: 3.Sql ...