Div CSS布局实例：详解建立Flash上面浮动层

　　
　　版权声明：本文由九扎、MrJin共同完成，如需转载请联系作者。

　　最近群里有很多朋友在讨论，如何在Flash上面建立一个层，这个层位于Flash之上而不被Flash覆盖。这是一个比较常见的案例，在现实工作中有着很大的意义。
　　例如，我们在页面顶端设置一个Flash动画，但想在这个动画上面浮动一层，可以放置链接或说明文字等。这样的编码更加易于修改，也更容易被搜索引擎收录；更重要的是，如果用户屏蔽了Flash，依然可以看到浮动层上的文字。
　　废话不多说，看这个实例的最终效果。


　　红色的区域即是浮于Flash之上的层。层内放了一个文字链接。
　　看下面的XHTML编码：

Example Source Code [www.]<div id="flash">
  <object classid="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">
    <param name="movie" value="hehe.swf" />
    <param name="quality" value="high" />
  </object>
  <div id="nav"><a href="http://www./css_websites_showcase/" title="CSS酷站欣赏">这是浮动层</a></div>
</div>
　　建立一个DIV，设置其ID为flash。插入一个flash动画hehe.swf。
　　在这个DIV内部，嵌套一个DIV，设置ID为nav。
　　下面我们开始CSS编码：

Example Source Code [www.]body {
    margin:0;
    padding:0;
    font-size:12px;
}
#flash {
    margin:20px auto 0 auto;
    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:1px solid #fff;
}
#nav a {
    color:#fff;
}
#nav a:hover {
    color:#ff0;
}
　　body是整体布局声明。
　　ID为flash的层设置为，距离顶部20px并水平居中对齐，宽度与高度正好与FLASH文件相同，应用相对定位。
　　ID为nav的层设置为，绝对定位，距离左侧与顶部分别是50px、30px，宽度为400px，行高30px，文字居中对齐，文字加粗。层的背景色为#f00红色。设置边框为一象素的实线并设置成白色。
　　对nav层的链接进行设置，链接文字颜色为白色，悬停状态为浅黄色。
　　至此我们初步编码已经完成。看看是何效果：

   用户名: (新注册)  密码: 匿名评论 [所有评论]     注意:（评论内容不能超过250字,需审核后才会公布,可以匿名评论,请自觉遵守互联网相关政策法规。）