DIV element can not float over Select element under IE while Firefox does.
Refer to an article to deal with the issue.
下拉框，即html的SELECT元素，.net設計時的DropDownList，是html中的windowed element，尤其ie6之後，幾乎是唯一的windowed element（還有popup等少量極少用的的）。
普通的元素，textbox, div, table……這些，屬於windowless element，它們之間互相遮蓋的情況由z-index決定，在它們之上，是SELECT這些windowed element。所以一般情況下div、table等不能遮蓋select。
這個問題廣泛存在於各種快顯控制項的使用之中，比如日曆控制項等。
如果要顯示div，以前的做法是，動態，在顯示的時候，讓div地區的select不可見，div消失的時候，再恢複這些select元素。這種做法比較奇怪，因為它嚴格上並不是“遮蓋”了select，而是，讓她整個消失了，如果calendar彈出元素只是應該遮蓋select元素的一部分，但 select卻整個不見，使用者也許會覺得奇怪；做起來也麻煩，要用js逐一判斷各select的位置。
ie5.5之後，有一個新的小技巧，稱之為“iframe shim”（iframe加塞:p），可以真正的“遮蓋”select元素。
它利用了一種特殊的元素：iframe。在ie5.5之前，iframe也是windowed element，但從5.5開始，iframe就是普通的windowless element了，可是，雖然是windowless element，iframe卻可以蓋住select。這種做法的原理就是：放一個iframe與你要顯示的東西（比如說一個div）同樣大小、位置，並設定z-index使得iframe在此DIV之下；這樣，iframe遮蓋了select，同時，iframe又在要顯示的div的下面，div就露出來了。
限制：僅適用於ie5.5及以後版本。
參考文章連結：
http://dotnetjunkies.com/WebLog/jking/archive/2003/07/21/488.aspx
樣本程式碼：
//html.select.hack.iframe shim.htm
<html>
<head>
<script>
function DivSetVisible(state)
{
var DivRef = document.getElementById('PopupDiv');
var IfrRef = document.getElementById('DivShim');
if(state)
{
DivRef.style.display = "block";
IfrRef.style.width = DivRef.offsetWidth;
IfrRef.style.height = DivRef.offsetHeight;
IfrRef.style.top = DivRef.style.top;
IfrRef.style.left = DivRef.style.left;
IfrRef.style.zIndex = DivRef.style.zIndex - 1;
IfrRef.style.display = "block";
}
else
{
DivRef.style.display = "none";
IfrRef.style.display = "none";
}
}
</script>
</head>
<body background="http://www.orkut.com/img/i_blau2.gif">
<form>
<select>
<option>A Select Box is Born ....</option>
</select>
</form>
<div
id="PopupDiv"
style="position:absolute;font:italic normal bolder 12pt Arial; top:25px; left:50px; padding:4px; display:none; color:#ffff00; z-index:100">
.... and a DIV can cover it up<br>through the help of an IFRAME.
</div>
<iframe
id="DivShim"
src="javascript:false;"
scrolling="no"
frameborder="0"
style="position:absolute; top:0px; left:0px; display:none;filter=progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);">
</iframe>
<br>
<br>
<a href="#" onclick="DivSetVisible(true)">Click to show DIV.</a>
<br>
<br>
<a href="#" onclick="DivSetVisible(false)">Click to hide DIV.</a>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>How to popup a DIV over a SELECT Tag</title>
</head>
<body bgcolor=#FFFFCC>
<script language="javascript" src="AnchorPosition.js"></script>
<!--
This is our DIV Tag that will popup over the current content, when we popup our div tag, we place
an IFRAME over the top of the div tag. This is so we can hide the Select tag.
We then place a table after the IFRAME and force it to be positioned starting at the top left
of our div tag.
-->
When you click the link below the popup will show over the top of the div
<div id="floatingdiv" style="position:absolute;display:none;left=30;top=20;width=300;height=150">
<iframe id="selectblocker" style="position:relative;"
frameBorder="0" scrolling="no" src="blank.htm"></iframe>
<table border=1 cellspacing=5 id="contents" style="position:absolute; background-color: #CCFF99">
<tr>
<td valign='top'>This is the actual contents that we want to display within the DIV tag area.</td>
</tr>
</table>
</div>
<form method="POST" action="">
<table border=1 cellspacing=2 cellpadding=2>
<tr><td>Enter your name</td><td><input type="text" name="name" id="name" size=10 style="width:200px">
</td></tr>
<tr><td>Please select your occupation</td><td><select size="1" name="D1" id="D1" style="width:200px">
<option>Programmer</option>
</select>
</td></tr></table>
</form>
<!-- move our hide and show links away from the div tag -->
<a href="Javascript:Show();">Show</a>
<a href="Javascript:Hide();">Hide</a>
<script language="javascript">
function Show(){
var divTag = document.getElementById("floatingdiv");
var iFrameTag = document.getElementById("selectblocker");
var tableTag = document.getElementById("contents");
var AnchorPos = getAnchorPosition("name")
divTag.style.left=AnchorPos.x+20;
divTag.style.top=AnchorPos.y+22;
divTag.style.width=300;
divTag.style.height=150;
iFrameTag.style.left = 0;
iFrameTag.style.top = 0;
iFrameTag.style.width = divTag.style.width;
iFrameTag.style.height = divTag.style.height;
iFrameTag.style.zIndex = divTag.style.zIndex-1;
tableTag.style.left = 0;
tableTag.style.top = 0;
tableTag.style.width = divTag.style.width;
tableTag.style.height = divTag.style.height;
tableTag.style.zIndex = divTag.style.zIndex;
divTag.style.display = "block";
}
function Hide(){
var divTag = document.getElementById("floatingdiv");
divTag.style.display = "none";
}
</script>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
