DIV CSS布局實例:建立Flash上面浮動層
本節和大家重點討論一下如何在Flash上面建立浮動層，我們在頁面頂端設置一個Flash動畫，但想在這個動畫上面浮動一層，可以放置鏈接或說明文字等，這樣的編碼更加易于修改，也更容易被搜索引擎收錄，請看下文詳細介紹。
DIV CSS布局實例：詳解建立Flash上面浮動層
如何在Flash上面建立一個層，這個層位于Flash之上而不被Flash覆蓋。這是一個比較常見的案例，在現實工作中有著很大的意義。
例如，我們在頁面頂端設置一個Flash動畫，但想在這個動畫上面浮動一層，可以放置鏈接或說明文字等。這樣的編碼更加易于修改，也更容易被搜索引擎收錄；更重要的是，如果用戶屏蔽了Flash，依然可以看到浮動層上的文字?？催@個實例的最終效果。
紅色的區域即是浮于Flash之上的層。層內放了一個文字鏈接。
看下面的XHTML編碼：
- <div id="flash">
- <objectclassidobjectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-44553540000"
- codebase="http://download.macromedia.com/
- pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
- width="500"height="220">
- <paramnameparamname="movie"value="hehe.swf"/>
- <paramnameparamname="quality"value="high"/>
- </object>
- <dividdivid="nav">
- <ahrefahref="http://www.52css.com/css_websites_showcase/"
- title="CSS酷站欣賞">這是浮動層</a></div>
- </div>
建立一個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層的鏈接進行設置，鏈接文字顏色為白色，懸停狀態為淺黃色。
至此我們初步編碼已經完成?？纯词呛涡Ч?/p>
運行后我們發現，并沒有出現想要的效果。nav層根本沒有出現，不知道這個家伙跑到哪里去了。我們在HTML代碼中增加一條語句：
- <paramnameparamname="wmode"value="transparent"/>
設置Flash為透明效果，看看運行效果，在IE中，已經達到了最終的效果，但是在Firefox中，我們發現動畫不見了。
為了能兼容Firefox顯示，我們在HTML中增加下面的代碼：
- <embedsrcembedsrc="hehe.swf"quality="high"
- wmode="transparent"
- pluginspage="http://www.macromedia.com/go/getflashplayer"
- type="application/x-shockwave-flash"
- width="500"height="220"></embed>
一切正常，在IE與Firefox中均實現了在Flash上面建立浮動層。
◆此案例最需要大家注意的有以下幾個地方：
1、Flash的容器層用相對定位position:relative;
2、浮動在flash上面的層用絕對定位position:absolute;
3、Flash要設置成透明；
4、針對Firefox增加Flash的embed標簽引用。
【編輯推薦】
