100分求助一个div层定位问题

先得到文本框的坐标再用文本框的坐标减去高度得到的坐标就是DIV要用到的坐标再让DIV显示就可以了

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script>
    function vis(obj){
    var od = document.getElementById('od'), o = obj, x = 0, y = 0, h = obj.offsetHeight;
    while(o != null){
    x += o.offsetLeft;
    y += o.offsetTop;
    o = o.offsetParent;
    }
    od.style.left = x+'px';
    od.style.top = y+ h +'px';
    od.style.visibility = 'visible';
    }
    function hid(){
    document.getElementById('od').style.visibility = 'hidden';
    }
    </script>
    </head>
    <body>
    <div id="od" style="visibility:hidden; position:absolute; width:50px; height:100px; border:1px solid #00f">一个DIV</div>
    <a href="#" onclick="vis(this)" onmouseout="hid()">第一个文本框</a> <a href="#" onclick="vis(this)" onmouseout="hid()">第二个广本框</a>
    </body>
    </html>
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>测试</title>
    </head>
    <body>  
    <script type="text/javascript">
    function TextareaFocus(index) {
        document.getElementById("div" + index).style.display = "";
    }
    function TextareaBlur(index) {
        document.getElementById("div" + index).style.display = "none";
    }
    </script>                
    <table>
    <tbody>
        <tr>
            <td>
                <textarea rows="2" cols="20" onfocus="TextareaFocus(1);" onblur="TextareaBlur(1);">1</textarea>
            </td>
            <td>
                <textarea rows="2" cols="20" onfocus="TextareaFocus(2);" onblur="TextareaBlur(2);">2</textarea>
            </td>
        </tr>
        <tr>
            <td>
                <div id="div1" style="display:none;">div1</div>
            </td>
            <td>
                <div id="div2" style="display:none;">div2</div>
            </td>
        </tr>
    </tbody>
    </table>
    </body>
    </html>
      

  3.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <script>
    function realOffset(o)
    {
    var x = y = 0; do{
    x += o.offsetLeft || 0; 
    y += o.offsetTop  || 0;
    o  = o.offsetParent;}while(o);
    return {"x" : x, "y" : y};
    }
    function show(obj)
    {
    var div =document.getElementById('div');
    div.style.display="";
    div.style.left =realOffset(obj).x+"px"
    div.style.top=realOffset(obj).y+obj.offsetHeight+"px"
    }
    </script>
    <body>
    <br><br><br><br>
    <input type="text" onfocus="show(this)">
    <br><br><br><br>
    <br><br><br><br>ssssssss
    <input type="text" onfocus="show(this)">
    <div id="div" style="display:none; position:absolute; width:100px; height:100px; border:1px solid black">
    <span style="color:blue" onclick="document.getElementById('div').style.display='none'">关闭</span></div>
    </body>
    </html>
      

  4.   

    <script>
    var oldobj;
        function vis(obj){
            var od = document.getElementById('od'), o = obj, x = 0, y = 0, h = obj.offsetHeight;
    if(oldobj){od.style.visibility = 'hidden';}
                x += o.offsetLeft;
                y += o.offsetTop;
                o = o.offsetParent;
            od.style.left = x+'px';
            od.style.top = y+ h +'px';
            od.style.visibility = 'visible';
    oldobj=obj;
        }
    </script>
    <div id="od" style="visibility:hidden; position:absolute; width:50px; height:100px; border:1px solid #00f">一个DIV</div>
    <input name="txt1" id="txt1" type="text" onclick="vis(this)">
    <input name="txt2" id="txt2" type="text" onclick="vis(this)">
      

  5.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script>
        function vis(obj){
            var od = document.getElementById('od'), o = obj, x = 0, y = 0, h = obj.offsetHeight;
            while(o != null){
                x += o.offsetLeft;
                y += o.offsetTop;
                o = o.offsetParent;
            }
            od.style.left = x+'px';
            od.style.top = y+ h +'px';
            od.style.visibility = 'visible';
        }
        function hid(){
            document.getElementById('od').style.visibility = 'hidden';
        }
    </script>
    </head>
    <body>
    <div id="od" style="visibility:hidden; position:absolute; width:50px; height:100px; border:1px solid #00f">一个DIV</div>
    <a href="#" onclick="vis(this)" onmouseout="hid()">第一个文本框</a> <a href="#" onclick="vis(this)" onmouseout="hid()">第二个广本框</a>
    </body>
    </html>
      

  6.   

    都写的什么啊  有那复杂吗<input onclick="showMsg();">
    <input onclick="showMsg();">
    <div id="msg" style="display:none;border:1px solid #ff9933;background:#ffffe1;padding:10px;">div message</div>
    <script>
    function showMsg()
    {
      msg.style.display=(msg.style.display=='none')?'block':'none';
    }
    </script>
      

  7.   

    LZ 可以试试我的，绝对符合你的要求！<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title>
    </head>
    <script>   // 找到链接的坐标，以显示选择评论页面
       function show(e , div){
     div = document.getElementById(div);   
         var t=e.offsetTop;
         var l=e.offsetLeft;
         while(e=e.offsetParent){
             t+=e.offsetTop;
             l+=e.offsetLeft;
         }
     div.style.visibility = "visible";
     div.style.left = l;
     div.style.top = t+20; // 纵坐标要加 20 ，因为要正好显示在文本框的下边就要加上文本框的高度（20 px）
       }
    </script>
    <body>
    <div id="od" style="visibility:hidden; position:absolute; width:100px; height:20px; border:1px solid #00f">一个DIV</div>
    <br/><br/>
    &nbsp;&nbsp;<input id="text1" onClick="show( this ,'od')"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input id="text2" onClick="show( this ,'od')"/>
    </body>
    </html>
      

  8.   

    问题不复查，关键在这：点击两个文本框的任何一个，div显示在点击文本框的下方，紧贴着文本框的下沿，左边与文本框对齐，3楼的方法应该可以实现。