CSS 讓 div 浮動在 iframe (含 SWF) 之上：z-index 失效解決方案

iframe 內嵌 SWF (Flash) 等外掛程式內容時，瀏覽器將其渲染在視窗最上層（繪製層級高於 HTML 元素），導致 CSS z-index 無法讓疊加層蓋住 iframe。解決核心：在疊加層與 iframe 之間插入一個透明 iframe 作為遮罩。

失效原因

• Flash/ActiveX/Java Applet 等外掛程式使用獨立繪製表面，不受 CSS 堆疊上下文控制。
• 現代瀏覽器 (Chrome/Edge) 已棄用 Flash，但同樣問題出現在 <video>、<canvas>、<object> 某些情況。

經典解法：iframe 遮罩

<div style="position:relative; z-index:9999;">
    <div id="floatLayer" style="position:absolute; top:30px; left:0; width:600px; height:100px; background:#F3F;">
        我要浮在上面的內容
        <!-- 關鍵：透明 iframe 遮罩 -->
        <iframe style="position:absolute; top:0; left:0; width:100%; height:100%; 
                       z-index:-1; border:none; opacity:0; filter:alpha(opacity=0)"
                src="about:blank" scrolling="no" frameborder="0"></iframe>
    </div>
</div>

<!-- 原本的 SWF iframe -->
<iframe src="demo.swf" style="width:500px; height:500px;"></iframe>

原理解析

1. 外層 div 建立堆疊上下文 (z-index:9999)。
2. 內層透明 iframe (src="about:blank") 同層級但 z-index:-1，渲染在浮動內容之下、SWF iframe 之上。
3. 瀏覽器會將 HTML iframe 內容繪製在外掛程式之上（同層級 HTML 互相疊加正常），達到遮罩效果。

現代替代方案

• wmode=transparent/opaque (僅 Flash)：<param name="wmode" value="transparent">，讓 Flash 融入 HTML 堆疊，但 Flash 已死，不建議。
• 改用 HTML5 技術：影片用 <video>、動畫用 <canvas>/CSS/JS/WebGL，原生支援 z-index。
• pointer-events: none：若僅需顯示疊加層不需互動，可讓滑鼠事件穿透。

相容性測試建議

IE11、Edge (Legacy)、Chrome、Firefox 均需實測，特別是透明 iframe 在不同文型模式下的表現。

若必須支援舊版 Flash 內容，iframe 遮罩是唯一可靠的純前端方案。