如何在页面上把一个层显示在文本框下面？

Question

<script>
function displayDiv()
{
  var div1 = document.getElementById("div1");
  div1.style.display="block";
}
function hideDiv()
{
  var div1 = document.getElementById("div1");
  div1.style.display="none";
}
</script>
<input onclick="displayDiv()" onblur="hideDiv()" />
<div id="div1" style="display:none;width:150px;height:150px;background-color:#FF7788">
Hello World
</div>

Answer 1

我意思没有说明白，不好意思，呵呵，是这样的：
一开始，这个层不是和input文本框靠在一起，位置是放在页面最下面的，当点击input后，能把这个层的位置移动到紧靠input的下面。我是想实现这样的效果，不知道怎么办。

Answer 2

<input type="text" onfocus="getDivPosition(this)"/>
<div id="addr" style="display:none;position:absolute;">xxxxx</div>function getDivPosition(o)
{
     var point=new Object();
     point.x=o.offsetLeft;
     point.y=o.offsetTop+o.offsetHeight;
     while(o=o.offsetParent)
     {
       point.x+=o.offsetLeft;
       point.y+=o.offsetTop;
     }
     var addr=document.getElementById("addr")
     addr.style.left=point.x+"px";
     addr.style.top=point.y+"px";
}

Answer 3

忘记显示了.function getDivPosition(o)
{
     var point=new Object();
     point.x=o.offsetLeft;
     point.y=o.offsetTop+o.offsetHeight;
     while(o=o.offsetParent)
     {
       point.x+=o.offsetLeft;
       point.y+=o.offsetTop;
     }
     var addr=document.getElementById("addr")
     addr.style.left=point.x+"px";
     addr.style.top=point.y+"px";
     addr.style.display="";//=========
}

Answer 4

LS的TOP有些浏览器offsetTop会算不准哦

Answer 5

<input type="text" onfocus="getDivPosition(this)" onfocusout="setDivHidden()"/>
<br>test
<br>test
<br>test
<br>test
<br>test
test
<div id="addr" style="display:none;position:absolute;background:red;width:100px;height:50px;">xxxxx</div>
<script>
function setDivHidden()
{
var addr=document.getElementById("addr")
addr.style.display = "none";
}
function getDivPosition(o)
{
var point=new Object();
point.x=o.offsetLeft;
point.y=o.offsetTop+o.offsetHeight;
while(o=o.offsetParent)
{
point.x+=o.offsetLeft;
point.y+=o.offsetTop;
}
var addr=document.getElementById("addr")
addr.style.left=point.x+"px";
addr.style.top=point.y+"px";
addr.style.display = "block";
}
</script>
TO showbo :我整理了一下，谢谢您！另外,我想问 while(o=o.offsetParent) 这段代码比较含义是什么？

Answer 6

<script> 
function   displayDiv() 
{ 
    var   div1   =   document.getElementById("div1"); 
    div1.style.display="block";
    var   div2   =   document.getElementById("div2"); 
    div2.style.display="none";  
} 
/*
function   hideDiv() 
{ 
    var   div1   =   document.getElementById("div1"); 
    div1.style.display="none"; 
     var   div2   =   document.getElementById("div2"); 
    div2.style.display=''; 
} */
</script> 
<input   onclick="displayDiv()"     /> <br>
<div   id="div1"   style="display:none;background-color:#FF7788"> 
Hello   World 
</div> 
----<br>
----<br>
----<br>
----<br>
----<br>
----<br>
<div   id="div2"   style="display:;background-color:#FF7788"> 
Hello   World 
</div>