最近群里有很多朋友在讨论，如何在Flash上面建立一个层，这个层位于Flash之上而不被Flash覆盖。这是一个比较常见的案例，在现实工作中有着很大的意义。
例如，我们在页面顶端设置一个Flash动画，但想在这个动画上面浮动一层，可以放置链接或说明文字等。这样的编码更加易于修改，也更容易被搜索引擎收录；更重要的是，如果用户屏蔽了Flash，依然可以看到浮动层上的文字。
废话不多说，看这个实例的最终效果。
红色的区域即是浮于Flash之上的层。层内放了一个文字链接。
看下面的XHTML编码：
Example Source Code
[www.52css.com]
<divid="flash">
<objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"width="500"height="220">
<paramname="movie"value="hehe.swf"/>
<paramname="quality"value="high"/>
</object>
<divid="nav"><ahref="http://www.52css.com/css_websites_showcase/"title="CSS酷站欣赏">这是浮动层</a></div>
</div>
建立一个DIV，设置其ID为flash。插入一个flash动画hehe.swf。
在这个DIV内部，嵌套一个DIV，设置ID为nav。
下面我们开始CSS编码：
Example Source Code
[www.52css.com]
body{
margin:0;
padding:0;
font-size:12px;
}
#flash{
margin:20pxauto0auto;
width:500px;
height:220px;
position:relative;
}
#nav{
position:absolute;
right:50px;
top:30px;
width:400px;
line-height:30px;
text-align:center;
font-weight:bold;
background:#f00;
border:1pxsolid#fff;
}
#nava{
color:#fff;
}
#nava:hover{
color:#ff0;
}
body是整体布局声明。
ID为flash的层设置为，距离顶部20px并水平居中对齐，宽度与高度正好与FLASH文件相同，应用相对定位。
ID为nav的层设置为，绝对定位，距离左侧与顶部分别是50px、30px，宽度为400px，行高30px，文字居中对齐，文字加粗。层的背景色为#f00红色。设置边框为一象素的实线并设置成白色。
对nav层的链接进行设置，链接文字颜色为白色，悬停状态为浅黄色。
至此我们初步编码已经完成。看看是何效果：
Source Code to Run
[www.52css.com]
[ 可先修改部分代码 再运行查看效果 ]
运行后我们发现，并没有出现想要的效果。nav层根本没有出现，不知道这个家伙跑到哪里去了。
我们在HTML代码中增加一条语句：
Example Source Code
[www.52css.com]
<paramname="wmode"value="transparent"/>
设置Flash为透明效果，看看运行效果：
Source Code to Run
[www.52css.com]
[ 可先修改部分代码 再运行查看效果 ]
在IE中，已经达到了最终的效果，但是在FF中，我们发现动画不见了。
为了能兼容FF显示，我们在HTML中增加下面的代码：
Example Source Code
[www.52css.com]
<embedsrc="hehe.swf"quality="high"wmode="transparent"pluginspage="http://www.macromedia.com/go/getflashplayer"type="application/x-shockwave-flash"width="500"height="220"></embed>
现在我们看看是什么运行效果了：
Source Code to Run
[www.52css.com]
[ 可先修改部分代码 再运行查看效果 ]
一切正常，在IE与FF中均实现了在Flash上面建立浮动层。
此案例最需要大家注意的有以下几个地方：
Example Source Code
[www.52css.com]
1、Flash的容器层用相对定位position:relative;
2、浮动在flash上面的层用绝对定位position:absolute;
3、Flash要设置成透明；
4、针对FF增加Flash的embed标签引用。
分享到：
相关推荐
CSS浮动float属性详解 在Web开发中，布局是非常重要的一方面，浮动float属性是CSS布局中非常关键的属性。通过对浮动float属性的理解和掌握，我们可以更好地实现网页的布局和排版。 Float浮动属性基本释义 float...
**CSS浮动(float)属性详解** 在现代网页设计中，`DIV CSS`布局是构建响应式和灵活页面结构的关键。其中，CSS的`float`属性扮演着至关重要的角色，它允许元素在页面上浮动，以便创建复杂的布局和多列设计。在传统...
### divcss布局实例知识点 #### 一、divcss布局简介 在网页设计中，`div+css`是一种非常常见的布局方式。它通过HTML中的`<div>`元素与CSS（层叠样式表）相结合来实现页面的布局效果。这种方式相较于传统的表格布局...
《CSS+DIV网页布局实例40例》是一个深入学习网页布局技术的重要资源，它涵盖了CSS（层叠样式表）和DIV元素在构建现代网页时的多种应用场景和技巧。本资源包含40个独立的实例，旨在帮助用户从实践中掌握网页布局的...
【div+css详解实例】 在Web开发中，`div+css`是一种常见的布局技术，它结合了HTML的`div`标签和CSS（层叠样式表）来实现网页的结构化和美化。`div`标签主要负责定义网页上的区块，而CSS则用来控制这些区块的样式和...
**DIV+CSS布局实例教程详解** 在网页设计领域，DIV+CSS布局技术是现代网页制作的基础，它使得页面结构清晰，样式与内容分离，提高了网页的可维护性和可访问性。本教程旨在帮助初学者从零开始掌握这一核心技术，通过...
《CSS+DIV布局网站实例详解》 在网页设计领域，CSS（Cascading Style Sheets）与HTML（Hypertext Markup Language）的结合使用是构建现代网站布局的基础。本实例主要探讨如何利用CSS+DIV技术来实现高效、灵活的网页...
### DIV+CSS布局大全知识点详解 #### 一、DIV+CSS布局入门 - **学习障碍分析**： - **理解CSS处理页面原理**：在学习CSS布局的过程中，首先要明确CSS是如何处理页面元素的。理解这一点有助于更好地应用CSS来构建...
《Div+Css实例源代码详解》 Div+CSS，即HTML中的<div>标签与CSS（层叠样式表）相结合的技术，是网页布局设计中的核心工具。这种技术的应用，使得网页设计更加灵活，代码结构更加清晰，同时提高了网页的可维护性和可...
本实例教程旨在帮助读者深入理解和掌握`DIV+CSS`网页样式与布局的技巧。 一、`DIV`元素详解 `DIV`是HTML中的一个通用容器标签，其全称为Division，意为分隔或区域。通过`<div>`标签，我们可以对网页内容进行逻辑...
### DIV+CSS布局详解 #### 一、概述 在现代Web开发中，**DIV+CSS布局**是一种常用的技术手段，用于构建网站结构和样式。它不仅能够帮助开发者更高效地组织网页内容，还能够实现更加美观的设计效果。本文将详细介绍...
#### 实例分析：div+css布局模板详解 在给定的部分内容中，我们可以看到一个典型的`div+css`布局示例。该模板主要分为头部（header）、导航菜单（menu）、主要内容区域（left_main和right_main）、内容块（con）...
### DIV+CSS完美布局知识点详解 #### 一、DIV+CSS布局原理与入门 DIV+CSS布局是现代网页设计中的关键技术之一，它摒弃了传统的表格布局方式，转而使用CSS（Cascading Style Sheets）样式来控制网页的布局和表现。...
### DIV+CSS布局大全知识点详解 #### 一、DIV+CSS布局基础概念 - **DIV+CSS**是一种网页布局方式，其中**DIV**是HTML中的一个容器标签（`<div>`），用来组合文档中的行内元素，使其成为独立的块级元素；而**CSS**...