摘要：

在Web開發中我們經常通過z-index設定多個元素之間的層疊關係，這種方式在多數情況下很有效，但是如果遇到有窗體元素時這種方式常常顯得無能為力，今天我們就一塊看一下如何有效的解決這個問題。

內容：

網頁控制元件分為兩大類：有窗體元素和無窗體元素。無窗體元素包括大多數html元素（例如div、table等）、無窗體的ActivX外掛、iframe等；有窗體的元素包括<Object>元素、ActiveX外掛、Plug-ins外掛、Select元素等。所有的有窗體元素都會出現在無窗體元素之上，而有窗體元素和無窗體元素自身遵循z-index屬性約束（注意使用z-index必須設定相應元素的position為absolute）。所有的無窗體元素都被瀏覽器渲染在同一個MSHTML平面，而有窗體元素被渲染在一個單獨的MSHTML平面上。在同一個MSHTML平面當然可以通過設定z-index屬性設定其層疊關係，但是對於不同平面上的元素，這個屬性卻無能為力。這裡需要注意ActiveX外掛，預設情況下VB和MFC控制元件是有窗體的，而ALT是無窗體的。

雖然上面說到ifame屬於無窗體元素，但是在ie中它卻橫跨兩邊。無論是有窗體元素還是無窗體元素在顯示時都會考慮iframe的順序。因此如果要解決無窗體元素和有窗體元素之間的層疊關係時我們可以藉助於iframe：通過把有窗體元素放到iframe中，然後設定iframe的z-index大於無窗體元素來解決二者層疊關係無法調整的問題；或者在無窗體元素內部放置一個iframe，設定其z-index小於無窗體元素並且其大小同無窗體元素相同；當然如果你覺得這兩種方式都太麻煩的話可以使用jQuery的bgiframe外掛，它的原理同第二種方式，不過使用起來就簡單多了。

上面的方式或許可以解決大多數情況，但是實際應用中或多或少會給你造成一些額外的開發成本，如果你的專案中使用的Ext來進行前臺開發，那麼很幸運，Ext原生就對遮蓋有窗體元素進行了支援。只需要在指令碼開始處加上Ext.useShims=true;即可。

另外：多數情況下div被flash遮蓋不用像上面這麼麻煩，只需要設定wmode屬性為transparent即可。