解決Flash內容總是漂浮於頁面頂層的問題
已經有兩個網友向我反應了Flash MP3 Player無法和lightbox之類插件兼容的問題，其症狀為，當打開lightbox效果的圖片時，flash movie會漂浮在整個頁面的最頂層，破壞了lightbox的效果。
今天做了一點小小的調查，原來瀏覽器渲染嵌入頁面的內容如flash movie或Java applet時，默認將它們放置於頁面的最上層，忽略其z-index屬性。所以，像lightbox這類插件，靠設置覆蓋層的z-index屬性來營造 高亮效果的js腳本，基本無法做到覆蓋掉頁面上的flash movie。
Adobe公司給出了對於類似問題的解決辦法，就是設置flash movie的wmode屬性。
這個屬性用於控制Flash 的窗口模式，其有三個取值：
window 模式
默認情況下的顯示模式，在這種模式下flash player有自己的窗口句柄，這就意味著flash影片是存在於Windows中的一個顯示實例，並且是在瀏覽器核心顯示窗口之上的，所以flash只 是貌似顯示在瀏覽器中，但這也是flash最快最有效率的渲染模式。由於他是獨立於瀏覽器的HTML渲染表面，這就導致默認顯示方式下flash總是會遮 住位置與他重合的所有DHTML層。
但是大多數蘋果電腦瀏覽器會允許DHTML層顯示在flash之上，但當flash影片播放時會出現比較詭異的現象，比如DHTML層像被flash刮掉一塊一樣顯示異常。
Opaque 模式
這是一種無窗口模式，在這種情況下flash player沒有自己的窗口句柄，這就需要瀏覽器需要告訴flash player在瀏覽器的渲染表面繪製的時間和位置。這時flash影片就不會在高於瀏覽器HTML渲染表面而是與其他元素一樣在同一個頁面上,因此你就可 以使用z-index值來控制DHTML元素是遮蓋flash或者被遮蓋。
Transparent 模式
透明模式，在這種模式下flash player會將stage的背景色alpha值將為0並且只會繪製stage上真實可見的對象，同樣你也可以使用z-index來控制flash影片的 深度值，但是與Opaque模式不同的是這樣做會降低flash影片的回放效果，而且在9.0.115之前的flash player版本設置wmode=」opaque」或」transparent」會導致全屏模式失效。
瞭解了各種模式的實現方式和意義在以後的開發中就可以按照具體情況選擇設置wmode屬性的值了。
我的插件之所以出現問題，就是因為我把wmode的值設定為了window，當然，這也是默認的值。從三種屬性值的具體含義中，我們可以知道，無論 是將wmode設定為opaque或者transparent，都可以解決問題，不過網上搜出來的結果，普遍只說了設成transparent這種，並且 普遍不講理由為何。
參考資料：
Flash content displays on top of all DHTML layers
How to make a Flash movie with a transparent background
作者：Charles
《Becomin' Charles》版權所有，轉載時必須以鏈接形式註明作者和原始出處及本聲明。