解決DIV層被OBJECT、SELECT控制元件遮蓋問題

mybwu_com發表於2014-03-17
Object控制元件
浮動層或便捷選單給使用者操作極大的便利。使用IE6、7時，SELECT控制元件不能被DIV遮蓋。OBJECT控制元件也不能被DIV遮蓋。究其原因，大多表單控制元件或HTML控制元件是使用瀏覽器本身渲染繪製，因此層次可以由瀏覽器自身控制。而SELECT控制元件是Windows視窗控制元件，同樣可見型ActiveX容器也是使用面向Windows技術開發。它們表現實質仍是相同，都是Windows視窗包含控制程式碼。因此，瀏覽器不能對其調整層次，瀏覽器本身與他們都是平級的。儘管IE8中解決了SELECT控制元件的問題，但OBJECT控制元件依然沒辦法改變。
參考網上的資料經過研究，有這樣的關係。Iframe框架可以遮蓋OBJECT、SELECT，DIV可以遮蓋Iframe。因此，我們可以將Iframe放置在DIV層內，將Iframe大小寬度設定成與層一樣放置在層之下，當層經過OBJECT、SELECT時，下方的框架將替層遮蓋其不能遮蓋的控制元件。
需要說明的是使用HTML標籤屬性設定顯示層次，必須是z-Index而不是zIndex。zIndex是使用指令碼動態修改屬性使用。兩者不通用。
下面給出一段示例：
<div id="DominoActionBar" style='position:absolute; left:6px; top:50px; width:100%; height:45px; z-Index:9'>
……
<iframe id='iframebar' src="about:blank" frameBorder=0 marginHeight=0 marginWidth=0
<wbr>style="position:absolute; visibility:inherit; top:0px;left:6px;height:45px;width:100%; z-Index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"&gt;<br><wbr><wbr><wbr><wbr>&lt;/iframe&gt;<br> &lt;/div&gt;</wbr></wbr></wbr></wbr></wbr>
需要說明的是top屬性要設定成0，不然將顯示不了層而是框架。

相關文章