在Web開發(fā)中我們經(jīng)常通過z-index設(shè)置多個(gè)元素之間的層疊關(guān)系，這種方式在多數(shù)情況下很有效，但是如果遇到有窗體元素時(shí)這種方式常常顯得無能為力，今天我們就一塊看一下如何有效的解決這個(gè)問題。

網(wǎng)頁控件分為兩大類：有窗體元素和無窗體元素。無窗體元素包括大多數(shù)html元素（例如div、table等）、無窗體的ActivX插件、iframe等；有窗體的元素包括<Object>元素、ActiveX插件、Plug-ins插件、Select元素等。所有的有窗體元素都會(huì)出現(xiàn)在無窗體元素之上，而有窗體元素和無窗體元素自身遵循z-index屬性約束（注意使用z-index必須設(shè)置相應(yīng)元素的position為absolute）。所有的無窗體元素都被瀏覽器渲染在同一個(gè)MSHTML平面，而有窗體元素被渲染在一個(gè)單獨(dú)的MSHTML平面上。在同一個(gè)MSHTML平面當(dāng)然可以通過設(shè)置z-index屬性設(shè)置其層疊關(guān)系，但是對于不同平面上的元素，這個(gè)屬性卻無能為力。這里需要注意ActiveX插件，默認(rèn)情況下VB和MFC控件是有窗體的，而ALT是無窗體的。

雖然上面說到ifame屬于無窗體元素，但是在ie中它卻橫跨兩邊。無論是有窗體元素還是無窗體元素在顯示時(shí)都會(huì)考慮iframe的順序。因此如果要解決無窗體元素和有窗體元素之間的層疊關(guān)系時(shí)我們可以借助于iframe：通過把有窗體元素放到iframe中，然后設(shè)置iframe的z-index大于無窗體元素來解決二者層疊關(guān)系無法調(diào)整的問題；或者在無窗體元素內(nèi)部放置一個(gè)iframe，設(shè)置其z-index小于無窗體元素并且其大小同無窗體元素相同；當(dāng)然如果你覺得這兩種方式都太麻煩的話可以使用jQuery的bgiframe插件，它的原理同第二種方式，不過使用起來就簡單多了。

上面的方式或許可以解決大多數(shù)情況，但是實(shí)際應(yīng)用中或多或少會(huì)給你造成一些額外的開發(fā)成本，如果你的項(xiàng)目中使用的Ext來進(jìn)行前臺(tái)開發(fā)，那么很幸運(yùn)，Ext原生就對遮蓋有窗體元素進(jìn)行了支持。只需要在腳本開始處加上Ext.useShims=true;即可。

另外：多數(shù)情況下div被flash遮蓋不用像上面這么麻煩，只需要設(shè)置wmode屬性為transparent即可。

最新評論