摘要:
在web
開發中我們經常通過
z-index
設定多個元素之間的層疊關係,這種方式在多數情況下很有效,但是如果遇到有窗體元素時這種方式常常顯得無能為力,今天我們就一塊看一下如何有效的解決這個問題。
內容:
網頁控制項分為兩大類:有窗體元素和無窗體元素。無窗體元素包括大多數
html
元素(例如
div、
table
等)、無窗體的
activx
外掛程式、iframe
等;有窗體的元素包括
元素、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
即可。
解決ActiveX外掛程式Z Index屬性無效問題
摘要 在web 開發中我們經常通過 z index 設定多個元素之間的層疊關係,這種方式在多數情況下很有效,但是如果遇到有窗體元素時這種方式常常顯得無能為力,今天我們就一塊看一下如何有效的解決這個問題。內容 網頁控制項分為兩大類 有窗體元素和無窗體元素。無窗體元素包括大多數 html 元素 例如 d...
ActiveX外掛程式下自定義選單
最近公司要求寫乙個ocx的外掛程式,把那種多文件的整個框架介面全部都分裝到外掛程式裡面,碰到的第乙個問題就是不能正常的載入顯示選單,在網上找了相關的資料都說用按鈕來替代選單,於是本人本著這種思路自定義了乙個選單類,拿來與大家分享一下,封裝的不是很到位,後來也懶得改,貼出來讓大家看看,相互交流下經驗 ...
非IE核心瀏覽器支援activex外掛程式
安裝完成後,可以打 狐瀏覽器在位址列輸入about plugins,檢視外掛程式是否正確安裝,如下圖所示,已經安裝成功 下面測試一下外掛程式效果,首先找乙個可用的activex控制項 本人用自己寫的外掛程式測試 html頁面 測試頁面 id webplugin ocxid border 0 widt...