求助，动态创建DIV 位置显示问题。

我想用JS 动态创建一个div，并定位到文本框上面.
下面这个方法在不滚动滚动条的时候，可以正常的定位到上面。
不过一动滚动条 div的位置就错了。。
麻烦高手帮忙解决下。小弟感激不尽
<!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=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var myDiv; // 保存创建出来的DIV

/**
*保存坐标
*/
function CPos(x, y)
{
this.x = x;
this.y = y;
}

/**
*获取控件的绝对坐标
*/
function getAbsPoint(obj)
{
var x,y;
oRect = obj.getBoundingClientRect();
x=oRect.left;
y=oRect.top;
return new CPos(x,y);
}

//在文本框上面显示Div
function show()
{
txt = document.getElementById("myTxt");
pos = getAbsPoint(txt);
hid();
myDiv = document.createElement("div");
myDiv.style.top = pos.y - 30;
myDiv.style.left = pos.x ;

myDiv.style.border = "2px solid #888";
myDiv.style.background = "#CCF";
myDiv.innerHTML = "我要显示在文本框上面！";
myDiv.style.position = "absolute";
document.body.appendChild(myDiv);
}

//隐藏创建出来的DIV
function hid()
{
if(myDiv)
{
myDiv.style.display = "none";
}
}
</script>
</head><body>
<div style="height:200px;"></div>
<input id="myTxt"/><br /><button onclick="show();">显示</button> <button onclick="hid()">隐藏</button>
<br/><br/>随便移动一下【滚动条】，然后点【显示】上面【div位置】就不对了。
<div style="height:800px;"></div>
</body>
</html>

解决方案 »

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

while(objParent)
            {
                ttop = ttop + objParent.offsetTop;
                tleft = tleft + objParent.offsetLeft;
                objParent = objParent.offsetParent;
            }
Top 和Left没有设对吧
为什么要写到while里面呀。有点费解.. 而且有点看不懂。
改这个函数
function getAbsPoint(obj)
    {
        var x,y;
        x=obj.offsetLeft;
        y=obj.offsetTop;
        return new CPos(x,y);
    }
  x=oRect.left; y=oRect.top;  获取的相对于页面显示部分坐上角的坐标。也就是说当你拉动滚动条时，这个坐标会变化。
   x=obj.offsetLeft;y=obj.offsetTop; 获取的相对于整个页面坐上角的坐标。也就是说当你拉动滚动条时，这个坐标不会变化。
为什么我该成绝对定位，位置就获取不到了。
我是想用做个层做个气泡，显示到文本框上面去。
<!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=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var myDiv; // 保存创建出来的DIV

/**
*保存坐标
*/
function CPos(x, y)
{
this.x = x;
this.y = y;
}

/**
*获取控件的绝对坐标
*/
function getAbsPoint(obj)
    {
        var x,y;
        x=obj.offsetLeft;
        y=obj.offsetTop;
        return new CPos(x,y);
    }
//在文本框上面显示Div
function show()
{
txt = document.getElementById("myTxt");
pos = getAbsPoint(txt);
hid();
myDiv = document.createElement("div");
myDiv.style.top = pos.y;
myDiv.style.left = pos.x;

myDiv.style.border = "2px solid #888";
myDiv.style.background = "#CCF";
myDiv.innerHTML = "我要显示在文本框上面！";
myDiv.style.position = "absolute";
document.body.appendChild(myDiv);
}

//隐藏创建出来的DIV
function hid()
{
if(myDiv)
{
myDiv.style.display = "none";
}
}
</script>
</head><body>
<div style="position:absolute;top:200px;left:300px;padding:100px 0 800px 0;">
<input id="myTxt"/><br />
<button onclick="show();">显示</button> <button onclick="hid()">隐藏</button>
<br/><br/>随便移动一下【滚动条】，然后点【显示】上面【div位置】就不对了。
</div>
</body>
</html>
<!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=utf-8" />
        <title>无标题文档</title>
        <script type="text/javascript">
            var myDiv; // 保存创建出来的DIV
            /**
             *保存坐标
             */
            function CPos(x, y){
                this.x = x;
                this.y = y;
            }

            /**
             *获取控件的绝对坐标
             */
            function getAbsPoint(obj){
                var x, y;
                oRect = obj.getBoundingClientRect();
                x = oRect.left;
                y = oRect.top;
                return new CPos(x, y);
            }

            //在文本框上面显示Div
            function show(){
                txt = document.getElementById("myTxt");
                pos = getAbsPoint(txt);
                hid();
                myDiv = document.createElement("div");
                myDiv.style.top = pos.y - 30 + document.documentElement.scrollTop;
                myDiv.style.left = pos.x;

                myDiv.style.border = "2px solid #888";
                myDiv.style.background = "#CCF";
                myDiv.innerHTML = "我要显示在文本框上面！";
                myDiv.style.position = "absolute";
                document.body.appendChild(myDiv);
            }

            //隐藏创建出来的DIV
            function hid(){
                if (myDiv) {
                    myDiv.style.display = "none";
                }
            }
        </script>
    </head>
    <body>
        <div style="height:200px;">
        </div>
        <input id="myTxt"/>
        <br/>
        <button onclick="show();">
            显示
        </button>
        <button onclick="hid()">
            隐藏
        </button>
        <br/>
        <br/>
        随便移动一下【滚动条】，然后点【显示】上面【div位置】就不对了。
        <div style="height:800px;">
        </div>
    </body>
</html>
谢谢所有给予帮助的朋友，问题解决了。
不过获取滚动条距顶部的高度我是用的 document.body.scrollTop 。
[quote =html code]
123

求助， 动态创建DIV 位置显示问题。

解决方案 »

求助，动态创建DIV 位置显示问题。