解決DIV層被OBJECT、SELECT控制元件遮蓋問題
浮動層或便捷選單給使用者操作極大的便利。使用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)';"><br><wbr><wbr><wbr><wbr></iframe><br> </div></wbr></wbr></wbr></wbr></wbr>
需要說明的是top屬性要設定成0，不然將顯示不了層而是框架。
參考網上的資料經過研究，有這樣的關係。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)';"><br><wbr><wbr><wbr><wbr></iframe><br> </div></wbr></wbr></wbr></wbr></wbr>
需要說明的是top屬性要設定成0，不然將顯示不了層而是框架。
相關文章
- flutter: 相鄰控制元件陰影被遮蓋Flutter控制元件
- android window 層級的程式碼設定（PopUpWindow遮蓋問題）Android
- 利用flex佈局解決ios輸入框被鍵盤遮擋問題FlexiOS
- 解決彈出層被Flash擋住的問題
- ie6絕對定位的塊會被select元素遮擋的解決方案
- 輸入框軟鍵盤遮擋問題解決方案
- 直播平臺原始碼，關於彈出框中輸入框被遮擋問題解決原始碼
- android 記一次解決鍵盤遮擋問題Android
- android記一次解決鍵盤遮擋問題Android
- 『零行程式碼』解決鍵盤遮擋問題（iOS）行程iOS
- iOS解決鍵盤彈出遮擋輸入框問題iOS
- iframe中的二級選單被遮蓋怎麼辦？
- div拖動遇到iframe卡頓的問題解決
- SQLserver 程式被死鎖問題解決SQLServer
- DIV+CSS相容解決DIV最大寬度和最小寬度問題CSS
- 資料庫層面問題解決思路資料庫
- wmode解決flash透明及層深問題
- 最近解決的幾個DIV＋CSS的問題CSS
- ubuntu下解決埠被佔用問題Ubuntu
- flutter - 使用 SingleChildScrollView() 解決鍵盤遮擋輸入框的問題FlutterView
- 使用貪心演算法解決集合覆蓋問題演算法
- video同層播放層級過高遮擋模擬暫停按鈕的問題IDE
- 解決小程式遮罩層滾動穿透問題遮罩穿透
- react在安卓下輸入框被手機鍵盤遮擋問題React安卓
- ubuntu下解決埠被佔用的問題Ubuntu
- 解決被掛起的資料庫問題資料庫
- 解決Linux下埠被佔用問題Linux
- 解決ELK日誌被截斷的問題
- 解決「問題」，不要解決問題
- env(safe-area-inset-bottom)解決ios底部小黑線遮擋問題iOS
- 如何解決div樣式拉伸問題
- 問題解決：AttributeError: ‘NoneType‘ object has no attribute ‘append‘ErrorNoneObjectAPP
- 解決Raize日曆控制元件顯示的問題AI控制元件
- 完美解決html中select的option不能隱藏的問題。HTML
- mysql 高併發 select update 併發更新問題解決方案MySql
- 如何解決選單被flash遮擋的現象
- 七層百貨商場無線覆蓋解決方案
- 專案總結二：解決鍵盤覆蓋tableview的問題View