![](http://www.cachefile.net/graphics/ui/famfamfam/mini/folder.gif)
jQuery bgiframe Plugin
http://blog.brandonaaron.net/tag/bgiframe/
![](http://www.cachefile.net/graphics/ui/famfamfam/mini/comment.gif)
一個步驟輕鬆解決 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();
});