jQuery bgiframe Plugin
http://blog.brandonaaron.net/tag/bgiframe/
一個步驟輕鬆解決 IE6 z-index 的問題
如果網頁上有浮動區塊和下拉選單重疊時，在 IE6 會看到下拉選單總是把浮動區塊蓋住，無論怎麼調整 z-index 都是沒用的，像是這樣(
若您不是使用 IE6 瀏覽本頁，則應該看到的是正常的浮動區塊在上面)：
歡迎來到 jsgears.com, 這是一個浮動區塊
所幸 jQuery 有方便的 plugin 可以處理這個問題，就是 bgiframe plugin。bgiframe 會在區塊的下面再插入一段 iframe，這樣就可以把下拉選單遮住，並且讓浮動區塊正常顯示。效果如下：
歡迎來到 jsgears.com, 這是一個浮動區塊
以上範例的 HTML 原始碼如下：
- <select style="z-index: 1;">
- <option>This is a test!</option>
- </select>
- <div id="floatingBox" style="width: 100px; height: 50px; border: solid 1px red; z-index: 2; background-color: lightyellow; position: relative; top: -35px; left: 40px;">歡迎來到 jsgears.com, 這是一個浮動區塊</div>
- <script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
- <script type="text/javascript" src="jquery.bgiframe.pack.js"></script>
<select style="z-index: 1;">
<option>This is a test!</option>
</select>
<div id="floatingBox" style="width: 100px; height: 50px; border: solid 1px red; z-index: 2; background-color: lightyellow; position: relative; top: -35px; left: 40px;">歡迎來到 jsgears.com, 這是一個浮動區塊</div>
<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="jquery.bgiframe.pack.js"></script>
除了記得引用 jquery 和 bgiframe 之外，JavaScript 的原始碼也相當簡單，只要先選出你要加入 iframe 的區塊後，再用 bgiframe() 這個函數來處理即可！
- $(document).ready(function() {
- $('#floatingBox').bgiframe();
- });
$(document).ready(function() {
$('#floatingBox').bgiframe();
});
