表格表头固定后，<select 这个控件却能够浮到标题的上方

<html><head><title></title></head><body>
<style>
div.DataGrid
{
  overflow: auto;
  height: 160;
  width: 400;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
function fixupFirstRow(tab)
{
  var div = tab.parentNode;
  if(div.className.toLowerCase() == "datagrid")
  {
    tab.rows[0].style.zIndex = "100";
    tab.rows[0].style.position = "relative"; document.all.MASKifm.style.height=tab.rows[0].offsetHeight;
    div.onscroll = function()
    {
      var tr = tab.rows[0];
      tr.style.top = this.scrollTop;
      tr.style.left = -1;   MASK.style.top=this.scrollTop;
    }
  }
}
window.onload = function()
{
  var tab = document.getElementById("content");
  if(tab) fixupFirstRow(tab);
}
</SCRIPT><div class=DataGrid>
<div id="MASK" style="position: absolute; z-index:99;filter: Alpha(Opacity=0); top:0px; left:0px; width:100%;"><iframe id="MASKifm" width="100%"></iframe></div>
  <table id=content width=600 border=1 class=table borderColor='#DAEAF5' align=center>
    <tr bgcolor=yellow><td>ｵﾚﾒｻﾁﾐ</td><td>ｵﾚｶﾁﾐ</td><td>ｵﾚﾈﾁﾐ</td><td>ｵﾚﾋﾄﾁﾐ</td></tr>
    <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
    <tr><td><select><option>dddd</option></select></td><td>2222222</td><td>3333333</td><td>444444</td></tr>
    <tr><td>1111111</td><td>2222222</td><td>3333333</td>
<td></td></tr>
    <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
    <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
    <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
    <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
    <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
  </table>
</div>
</body>
</html>
</body></html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

被SELECT控件遮挡解决办法只有用iframe或createPopup.
<html><head><title></title></head><body>
<style>
div.DataGrid
{
  overflow: auto;
  height: 160;
  width: 400;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
function fixupFirstRow(tab)
{
  var div = tab.parentNode;
  if(div.className.toLowerCase() == "datagrid")
  {
    tab.rows[0].style.zIndex = "100";
    tab.rows[0].style.position = "relative";
//////////////////////////////////
    var tr = tab.rows[0]; //++
var ifm=document.createElement("IFRAME") ifm.style.width=tr.offsetWidth
ifm.style.height=tr.offsetHeight ifm.style.position="absolute"
ifm.style.left=0
ifm.style.top=0 ifm.style.filter="alpha(opacity=0)";
ifm.style.zIndex="99" div.appendChild(ifm)
///////////////////////////////////////
    div.onscroll = function()
    {
      tr.style.top = this.scrollTop;
      tr.style.left = -1;
      ifm.style.top=this.scrollTop //++
    }
  }
}
window.onload = function()
{
  var tab = document.getElementById("content");
  if(tab) fixupFirstRow(tab);
}
</SCRIPT><div class=DataGrid>
  <table id=content width=600 border=1 class=table borderColor='#DAEAF5' align=center>
    <tr bgcolor=yellow><td>ｵﾚﾒｻﾁﾐ</td><td>ｵﾚｶﾁﾐ</td><td>ｵﾚﾈﾁﾐ</td><td>ｵﾚﾋﾄﾁﾐ</td></tr>
    <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
    <tr><td><select><option>dddd</option></select></td><td>2222222</td><td>3333333</td><td>444444</td></tr>
    <tr><td>1111111</td><td>2222222</td><td>3333333</td>
<td></td></tr>
    <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
    <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
    <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
    <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
    <tr><td>1111111</td><td>2222222</td><td>3333333</td><td>444444</td></tr>
  </table>
</div>
</body>
</html>
设置z-index
有用吗，我试过这个好像没有用的
只能使用iframe的方法