codebase="http://download.macromedia.com/  
pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"  
width="500"height="220"> 
 
 
 
 
title="CSS酷站欣赏">这是浮动层

 建立一个DIV，设置其ID为flash。插入一个flash动画hehe.swf。在这个DIV内部，嵌套一个DIV，设置ID为nav。
　　
CSS编码：

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#Firefoxf;  
}  
#nava{  
color:#Firefoxf;  
}  
#nava:hover{  
color:#Firefox0;  
}  

　　body是整体布局声明。

　　ID为flash的层设置为，距离顶部20px并水平居中对齐，宽度与高度正好与FLASH文件相同，应用相对定位。

　　ID为nav的层设置为，绝对定位，距离左侧与顶部分别是50px、30px，宽度为400px，行高30px，文字居中对齐，文字加粗。层的背景色为#f00红色。设置边框为一象素的实线并设置成白色。

　　对nav层的链接进行设置，链接文字颜色为白色，悬停状态为浅黄色。

    至此我们初步编码已经完成。看看是何效果：

运行后我们发现，并没有出现想要的效果。nav层根本没有出现，不知道这个家伙跑到哪里去了。我们在HTML代码中增加一条语句：

　　设置Flash为透明效果，看看运行效果，在IE中，已经达到了最终的效果，但是在Firefox中，我们发现动画不见了。

为了能兼容Firefox显示，我们在HTML中增加下面的代码：

wmode="transparent" 
pluginspage="http://www.macromedia.com/go/getflashplayer" 
type="application/x-shockwave-flash" 
width="500"height="220"> 
 

 一切正常，在IE与Firefox中均实现了在Flash上面建立浮动层。

◆此案例最需要大家注意的有以下几个地方：

1、Flash的容器层用相对定位position:relative;

2、浮动在flash上面的层用绝对定位position:absolute;

3、Flash要设置成透明；

4、针对Firefox增加Flash的embed标签引用。

【编辑推荐】

1. 跨浏览器兼容的四大CSS编码准则
2. DIV+CSS与表格建站的差别
3. CSS样式表中属性选择器四种格式
4. Div+CSS标准化的优点
5. DIV CSS解决不规则文字排版问题