解決控件遮擋難題：深入理解有窗口與無窗口元素的層級關係

在 Web 開發中，控件遮擋問題一直是前端工程師的心頭之痛。最典型的莫過於 <select> 下拉選單（DropdownList）與 ActiveX 控件總是固頑地浮雜在其他元素之上，無論你如何調整 z-index 都無濟於事。這背後的核心原因，在於瀏覽器渲染引擎將頁面元素劃分為「有窗口」與「無窗口」兩個截然不同的繪製平面。

什麼是有窗口元素？

擁有獨立窗口句柄（HWND）的元素，繪製於最高層平面，不受 CSS z-index 控制。常見類型包括：

• <object> 標籤嵌入的內容
• ActiveX 控件（VB/MFC 編寫的預設為有窗口）
• 瀏覽器外掛程式
• DHTML Scriptlets
• <select> 元素（即 DropdownList 的 HTML 表現）
• IE 5.01 之前版本的 <iframe>

什麼是無窗口元素？

無獨立窗口句柄，繪製於較低平面，遵循 CSS z-index 層疊規則：

• 無窗口模式的 ActiveX 控件（ATL 控件預設為無窗口）
• IE 5.5 及更新版本的 <iframe>
• 絕大多數標準 DHTML 元素（<div>、<span>、<img> 等）

關鍵規則：無論容器如何設置，所有有窗口元素永遠顯示在無窗口元素之上。兩類元素內部各自遵循 z-index，但彼此處於不同平面，z-index 無法跨平面生效。

實戰解決方案：用 <iframe> 做中介層

利用 IE 5.5+ 中 <iframe> 屬於無窗口元素的特性，將其置於有窗口元素（如 <select>）之上，再在 <iframe> 內載入真正的內容頁面，即可實現視覺上的遮蓋效果。

代碼示例

<div id="overlayLayer" style="display: inline; z-index: 8; left: 80px; width: 360px; position: absolute; top: 80px; height: 168px">
  <iframe id="contentFrame" style="z-index: 8; width: 352px; height: 168px" src="TestDivDropdownList.htm"></iframe>
</div>

設置外層 <div> 的 z-index: 8，將頁面上的 <select> 元素 z-index 設為 7 或更低，即可實現自定義浮層覆蓋原生下拉選單的效果。

現代瀏覽器環境下的最佳實踐

隨著 IE 逐漸退出歷史舞台，現代瀏覽器（Chrome、Firefox、Edge 等）已將 <select> 改為無窗口渲染，z-index 可直接生效。但在維護老舊專案或需相容企業級 IE 模式時，上述方案仍具參考價值。新專案建議優先使用原生 HTML/CSS 方案，必要時採用 Shadow DOM 或 Portal 技術處理層級隔離。