div怎么浮动出现在文本框的正下方

function mouseout()
{
   var div=document.getElementById('div1');
   if(div.style.display=="none")
   {
      div.style.display="block";
  div.style.position:absolute;
   }
   else
   {
      div.style.display="none";
   }}
出现在下方不会把下面的文本框挤走吧？该怎么写，谢谢

解决方案 »

  1.   

    把html贴出来看看哇!   先获取到文本框的位置,然后在给div进行定位啊!
      

  2.   

    <div id="div1" style="display:none" > <table width="205" height="146" border="1" cellpadding="0" cellspacing="0" bordercolor="#009966" bgcolor="#339966">
        <tr>
          <td width="49" class="style2"><input type="button" name="Submit2" value="1" 
                  style="height: 27px; width: 45px" /></td>
          <td width="48" class="style2"><input type="button" name="Submit3" value="2" 
                 style="height: 27px; width: 45px" /></td>
          <td width="45" class="style2"><input type="button" name="Submit4" value="3" style="height: 27px; width: 45px"/></td>
          <td width="53" class="style2"><input type="button" name="Submit14" value="退格" 
                  style="height: 25px; width: 46px" /></td>
        </tr>
        <tr>
          <td height="32"><input type="button" name="Submit5" value="4" style="height: 27px; width: 45px"/></td>
          <td><input type="button" name="Submit6" value="5" style="height: 27px; width: 45px"/></td>
          <td><input type="button" name="Submit7" value="6" style="height: 27px; width: 45px"/></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td height="29"><input type="button" name="Submit8" value="7" style="height: 27px; width: 45px"/></td>
          <td><input type="button" name="Submit9" value="8" style="height: 27px; width: 45px"/></td>
          <td><input type="button" name="Submit10" value="9" style="height: 27px; width: 45px"/></td>
          <td width="53" rowspan="2"><input type="button" name="Submit" value="确定" 
                  style="height: 56px; width: 48px" /></td>
        </tr>
        <tr>
          <td class="style1"><input type="button" name="Submit11" value="/" style="height: 27px; width: 45px"/></td>
          <td class="style1"><input type="button" name="Submit13" value="\" style="height: 27px; width: 45px"/></td>
          <td class="style1"><input type="button" name="Submit12" value="*" style="height: 27px; width: 45px"/></td>
        </tr>
      </table></div>
      

  3.   


    <html>
    <head>
        <title>js学习实例</title>
        <script type="text/javascript">
    function mouseouts()
    {
       var div=document.getElementById('div1');
       if(div.style.display=="none")
       {
          div.style.display="block";
          div.style.position = "absolute";
          div.style.top = document.getElementById('txt1').style.top + 50 + "px";
          div.style.left = "0px";
       }
       else
       {
          div.style.display="none";
       }}    </script>
    </head>
    <body>
        <input type="text" value="" id="txt1" /><input type="button" value="点击我" onclick="mouseouts()" />
        <div id="div1" style="display: none">
            <table width="205" height="146" border="1" cellpadding="0" cellspacing="0" bordercolor="#009966"
                bgcolor="#339966">
                <tr>
                    <td width="49" class="style2">
                        <input type="button" name="Submit2" value="1" style="height: 27px; width: 45px" />
                    </td>
                    <td width="48" class="style2">
                        <input type="button" name="Submit3" value="2" style="height: 27px; width: 45px" />
                    </td>
                    <td width="45" class="style2">
                        <input type="button" name="Submit4" value="3" style="height: 27px; width: 45px" />
                    </td>
                    <td width="53" class="style2">
                        <input type="button" name="Submit14" value="退格" style="height: 25px; width: 46px" />
                    </td>
                </tr>
                <tr>
                    <td height="32">
                        <input type="button" name="Submit5" value="4" style="height: 27px; width: 45px" />
                    </td>
                    <td>
                        <input type="button" name="Submit6" value="5" style="height: 27px; width: 45px" />
                    </td>
                    <td>
                        <input type="button" name="Submit7" value="6" style="height: 27px; width: 45px" />
                    </td>
                    <td>
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td height="29">
                        <input type="button" name="Submit8" value="7" style="height: 27px; width: 45px" />
                    </td>
                    <td>
                        <input type="button" name="Submit9" value="8" style="height: 27px; width: 45px" />
                    </td>
                    <td>
                        <input type="button" name="Submit10" value="9" style="height: 27px; width: 45px" />
                    </td>
                    <td width="53" rowspan="2">
                        <input type="button" name="Submit" value="确定" style="height: 56px; width: 48px" />
                    </td>
                </tr>
                <tr>
                    <td class="style1">
                        <input type="button" name="Submit11" value="/" style="height: 27px; width: 45px" />
                    </td>
                    <td class="style1">
                        <input type="button" name="Submit13" value="\" style="height: 27px; width: 45px" />
                    </td>
                    <td class="style1">
                        <input type="button" name="Submit12" value="*" style="height: 27px; width: 45px" />
                    </td>
                </tr>
            </table>
        </div>
    </body>
    </html>
      

  4.   

      <input type="text" name="textfield" onclick="mouseout();"/>
    我是点击文本框弹出的
      

  5.   

    你的源码里面那个div把下面所有的都隐藏了......
      

  6.   

    自己调整一下top的值