<html><head><title>层与按钮对齐</title></head><body>
<div align=left><table border=1 width=600 height=50>
<tr align=center>
  <td>
    <input type=button value=ok onmouseover="cc(this)" alt="提示信息一"
     onmouseout="document.all.pop.style.display='none'">
  </td><td>
    <input type=button value=ok onmouseover="cc(this)" alt="提示信息二"
     onmouseout="document.all.pop.style.display='none'">
  </td><td>
    <input type=button value=ok onmouseover="cc(this)" alt="提示信息三"
     onmouseout="document.all.pop.style.display='none'">
  </td></tr>
</table><div><div id=pop style="
  position: absolute;
  width: 120;
  height: 30;
  z-index: 99;
  display: none;
  background-color: #FF0000"
>
图层文字</div><script language=javascript>
function cc(tt)
{
  var e  = document.getElementById("pop");
  var t  = tt.offsetTop;     //TT控件的定位点高
  var h  = tt.clientHeight;  //TT控件本身的高
  var l  = tt.offsetLeft;    //TT控件的定位点宽
  var ttyp  = tt.type;       //TT控件的类型
  while (tt = tt.offsetParent){t += tt.offsetTop; l += tt.offsetLeft;}
  e.style.top  = (ttyp=="image")? t + h : t + h + 6; //层的 Y 坐标
  e.style.left = l + 1;      //层的 X 坐标
  e.style.display = "block"; //层显示
  e.innerText = window.event.srcElement.alt;
}
</script>
</body></html>

解决方案 »

  1.   

    你要得到table的offsetTop而不是td的offsetTop,所以在得相对高度时应该用
    var oTop = objTD.parentElement.parentElement.parentElement.offsetTop;
    这样.
    或者是  var oTop = tableID.offsetTop
      

  2.   

    <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title> New Document </title>
    <script language="javascript">
    function showDiv(DivID,objTD)
    {
    var oLeft = objTD.offsetLeft;
    var oTop = objTD.parentElement.parentElement.parentElement.offsetTop;
    oTop += objTD.offsetHeight;

    var objDiv = eval(DivID);

    objDiv.style.display = "";
    objDiv.style.left = oLeft;
    objDiv.style.top = oTop;
    }

    function hideDiv(DivID)
    {
    var objDiv = eval(DivID);
    objDiv.style.display = "none";
    }

    function showSelf(objDiv)
    {
    if (objDiv.style.display != "")
    {objDiv.style.display = "";}
    }

    function hideSelf(objDiv)
    {
    if (objDiv.style.display != "none")
    {objDiv.style.display = "none";}
    }
    </script>
    </head><body topMargin="0" leftMargin="0">
        <div id="myDiv" onmouseover="showSelf(this)" onmouseout="hideSelf(this)" style="DISPLAY: none;POSITION: absolute; BACKGROUND-COLOR: #33ff66">
    <table border="0">
    <tr>
    <td>DIV-DIV</td>
    </tr>
    <tr>
    <td>DIV-DIV</td>
    </tr>
    </table>
    </div>
    <table><tr><td>a</td></tr><tr><td>a</td></table>
    <table border="1" cellpadding="0" cellspacing="0" style="POSITION: relative">
    <tr>
    <td onmouseover="showDiv('myDiv',this)" onmouseout="hideDiv('myDiv')">&nbsp;&nbsp;aaaaaa&nbsp;&nbsp;</td>
    <td onmouseover="showDiv('myDiv',this)" onmouseout="hideDiv('myDiv')">&nbsp;&nbsp;bbbbbb&nbsp;&nbsp;</td>
    <td onmouseover="showDiv('myDiv',this)" onmouseout="hideDiv('myDiv')">&nbsp;&nbsp;cccccc&nbsp;&nbsp;</td>
    <td onmouseover="showDiv('myDiv',this)" onmouseout="hideDiv('myDiv')">&nbsp;&nbsp;dddddd&nbsp;&nbsp;</td>
    </tr>
    </table>

    </body></html>