ActiveX插件的Z-Index屬性無效問題解決

2024-07-11 08:47:44

字體：大中小

來源：轉載

供稿：網友

在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即可。

上一篇：深入解析IE兼容模式問題

下一篇：CSS簡寫小集