很多人在写页面代码时都会遇到过这样一个问题,那就是当Flash与页面中的其它HTML结构有重叠的时候,默认情况下Flash总是显示在最上 面,从而遮挡住了与它有重叠部分的HTML结构,就算为该Flash或是HTML结构标签定义z-index属性却依然是无效的。

因为默认情况下在网页中添加的Flash在浏览器中是以窗口模式存在的,是独立于浏览器的HTML结构渲染的,所以这种情况下的Flash会遮盖住与它重叠的HTML。

在Adobe Flash的发布设置里关于HTML的设置有一项是“窗口模式”,这里面提供了三个选项,分别是:窗口(window)、不透明无窗口(opaque)、透明无窗口(transparent)。

这三种模式分别表示着Flash在页面中的三种表现形式,根据这三种表现形式,我们就找到了解决这个问题的方法,就是将页面中的Flash模式 (wmode)设置为不透明无窗口(opaque)或者是透明无窗口(transparent),在这两种模式下页面中的Flash将与HTML结构是处 于同一级别的,所以就可以通过z-index来控制页面中的重叠部分到底是Flash显示在上还是HTML结构显示在上。

当我们需要在页面中加载一个弹出Flash广告时,并且不希望它被页面中的其它Flash所遮挡时,就可以使用这种方法来解决。同样的如果这个弹出 Flash是不规则形状的时候,就可以将模式(wmode)设置为透明无窗口(transparent),这样即可以除去Flash本身所带有的背景。

IE里
<param name="wmode" value="Opaque">
firefox里
<embed wmode="transparent"></embed>

一般是两个都加进去。

Flash与DIV的层叠顺序问题的更多相关文章

  1. 谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  2. 一篇通俗易懂的CSS层叠顺序与层叠上下文研究

    网上有很多这方面的教程,但不是苦涩难懂就是从哪copy过来的,反正很长一段时间我是没看懂,时间长了也没打算去研究了,主要原因是,基本上很少会遇到那些问题(所以说啊,要是没有研究精神的才懒得管它).但自 ...

  3. 深入理解CSS中的层叠上下文和层叠顺序(转)

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...

  4. 深入理解CSS中的层叠上下文和层叠顺序

    零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...

  5. CSS基础:层叠顺序和层叠上下文

    简介 在考虑到两个元素可能重叠的情况下,层叠顺序决定了那个元素在前面,那个元素在后面,这是针对普通元素而言.而层叠上下文和块级格式化上下文 (BFC) 一样,基本上也是由一些 CSS 属性创建的,它单 ...

  6. [转]深入理解CSS中的层叠上下文和层叠顺序

    http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...

  7. 层叠顺序与堆栈上下文、font-family字体定义顺序的

    1.层叠顺序与堆栈上下文 z-index 看上去其实很简单,根据 z-index 的高低决定层叠的优先级,实则深入进去,会发现内有乾坤. 问题背景:拥有共同父容器的两个 DIV 重叠在一起,是 dis ...

  8. CSS中的层叠上下文和层叠顺序

    一.什么是层叠上下文和层叠水平 层叠上下文和层叠水平有一点儿抽象.我们可以吧层叠上下问想象成一张桌子,如果有另一个桌子在他旁边,则代表了另一个层叠上下文. Stacking context 1由文件根 ...

  9. css之层叠上下文和层叠顺序

    大家在写网页的时候会不会经常遇到莫名奇妙的样式问题,比如谁覆盖了谁.也找不出原因,为什么z-index高的却没有覆盖掉z-index低的元素呢? 带着这些疑问.我做了个小实验.代码如下: <st ...

随机推荐

  1. Linux下安装LANMP环境

    记录下来,方便下次再用时从头查找资料 首先是操作系统和php环境:CentOS 6.5 64位(之所以不是7.0是因为本身对linux不熟,而7.0改变挺大的,搜索查询资料也不好搜索),Php版本:5 ...

  2. 转:Java开发牛人十大必备网站

    原文来自于:http://www.importnew.com/7980.html 以下是我收集的Java开发牛人必备的网站.这些网站可以提供信息,以及一些很棒的讲座, 还能解答一般问题.面试问题等.质 ...

  3. C++学习笔记--Season 2

    一个简单的EGE程序: #include "graphics.h" //EGE库的头文件 int main(int argc, char** argv) { initgraph(, ...

  4. Node.js 入门(2)

    1.http 请求 //调用Node.js自带的http模块 var http = require("http"); //调用http模块提供的函数createServer htt ...

  5. PartialFunction(偏函数)

    val one:PartialFunction[Int,String]={ case 1 => "one" case 2 => "two" case ...

  6. hdu 4407 Sum

    http://acm.hdu.edu.cn/showproblem.php?pid=4407 题意:给定初始n个数1..n,两个操作,①1 x y p  询问第x个数到第y个数中与p互质的数的和; ② ...

  7. lua学习笔记之-语言基础

    一.基本知识 1.第一个程序: print("hello lua"); 在交互模式下直接运行: > print("hello lua") hello lu ...

  8. Microsoft Detours 2.1简介

    http://blog.163.com/qcb_163/blog/static/9545466420117851038971/ Microsoft Detours 2.1简介 2011-08-0817 ...

  9. POJ 3268 Silver Cow Party ( Dijkstra )

    题目大意: 有N个农场每个农场要有一头牛去参加一个聚会,连接每个农场有m条路, 聚会地点是X,并且路是单向的.要求的是所有牛赶到聚会地点并且回到自己原先的农场所需要的最短时间. 题目分析: 其实就是以 ...

  10. Children’s Queue HDU 1297 递推+大数

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1297 题目大意: 有n个同学, 站成一排, 要求 女生最少是两个站在一起, 问有多少种排列方式. 题 ...