为什么zindex在众多标签中失效

转【http://audi.tw/Blog/webDesign/Flash.swfobject.js.asp】

無論是 CSS 下拉式目錄，或是 Javascript 製作出來的彈出式清單，一旦遇到 Flash 時，就被 Flash 遮蓋住，這個問題困擾了不少設計人員，原則上有兩種解決方法，一種是在圖層中使用 IFRAME，另一種則是改變 Flash 嵌入方式。

這裡要聊的，是第二種方法，先來看看問題狀況：

將滑鼠移到這裡 彈出選單1 彈出選單2 彈出選單3 彈出選單4 彈出選單5 彈出選單6	將滑鼠移到這裡 彈出選單1 彈出選單2 彈出選單3 彈出選單4 彈出選單5 彈出選單6

左邊的彈出選單被 Flash 蓋住了，而右邊的彈出選單，則沒有這種情況，這兩個例子的彈出選單都是使用 CSS 製作。

先講解決方法，左邊的 Flash 使用 <object> 嵌入頁面中，<object> 物件在 HTML 規格中，還算妾身未明的物件，造成的最大問題是控制上的問題，比如這個例子，就算你把 Flash 放到圖層中，再加上 z-index 照樣把彈出選單蓋住。那怎麼辦呢？改右邊的方法，以swfobject方式嵌入，語法為：

<script type="text/javascript" src="images/swfobject.js"></script>
<div id="flashcontent">無法播放 Flash 時替代的文字內容</div>
<script type="text/javascript">
     var fo = new FlashObject("images/flash.swf", "mymovie", "200", "200", "7", "#ff00ff");
     fo.addParam("wmode", "transparent");
     fo.write("flashcontent");
</script>

步驟是先連結 swfobject.js 這個檔案，檔案的官方下載位置是：

swfobject_1.4.zip(40K)

壓縮檔中檔案很多，是範例及說明，要用到的只有 swfobject.js一個檔案。

然後宣告一個放置 flash 的區塊，這個例子的識別名稱為 flashcontent，接下來，建立 FlashObject 物件，語法是：

var fo=new FlashObject(swf檔,識別元,寬度,高度,Flash版本,背景色);

如果需要加其他屬性，例如透明，則使用 fo.addParam 加入，語法為：

 fo.addParam("wmode", "transparent");

最後，把物件寫到 flashcontent 區塊中，語法為：

fo.write("flashcontent");

如此就完成了，原文刊載於：

http://www.adobe.com/devnet/flash/articles/swfobject.html

什麼情況造成的？

原因和網頁元件的特性有關，如果要把網頁元件分類，其中有一種分類法為：可定位(Positional)和不可定位(non- Positional)，什麼意思呢？網頁中呈現的元件，例如段落、表格等，是由 HTML 創建出來的，但部份我們熟知的元件，例如表單，卻不是由 HTML 創建出來，而是作業系統本身建立，HTML 只不過是叫過來用(call)，類似的元件還有 Java Applet、ActiveX、Flash 和一些 plug-in等。

講白一點，HTML 是一個二維空間，只上下左右的概念，有了 CSS 之後，開始有三度空間的概念，但，前述提到的這些元件，既非擺在二維空間裡，也不是擺在三度空間中，到底擺那？天知道！所以　z-index 失效，基本上，這應屬於瀏覽器的問題，這裡有一篇專文論述：

http://www.webreference.com/dhtml/diner/seethru/index.html

同樣的情況，還常見於下拉表單突破彈出選單，但這個問題，瀏覽器本身已經解決了，像 FireFox 上就不會發生，至於 IE，我就沒空想知道他們改正沒。

這算是個老問題了，199X 年時就被廣泛討論，最主要是用 Javascript 製作的動態下拉功能表被表單中的下拉清單穿透造成的，當時急壞了一些人，後來發現，用 IFRAME 這個不可定位元件來以毒攻毒可以解決這問題，原理就是把 IFRAME 放到圖層中，如此一來，管你底下是表單的下拉清單還是 Flash，一律可以蓋過去。作法就有點囉嗦，這裡就不提了。