用Javascript设置DIV的绝对位置

在实际的开发中，我们经常要做到以下的效果：

虽然操作是很简单，但是相信大多数人都是“拿来主义”者，不会关心代码。
呵呵，其实今天自己也是被问到了，所以特别关注了一下DIV位置的确定。

废话少说，先建立一个htm页面

<input type="text">
<div id="divShow" style="display:none;position:absolute;">显示的内容</div>

display:none，表示此层隐藏
position:absolute，表示此层的为绝对位置，方便后期进行绝对定位

添加事件，完成效果

<script type="text/javascript">
function showDiv(obj) {
// 保存元素
var el = obj;
// 获得元素的左偏移量
var left = obj.offsetLeft;
// 获得元素的顶端偏移量
var top = obj.offsetTop;

// 循环获得元素的父级控件，累加左和顶端偏移量
while (obj = obj.offsetParent) {
left += obj.offsetLeft;
top += obj.offsetTop;
}

// 设置层的坐标并显示
document.all.divShow.style.pixelLeft = left;
// 层的顶端距离为元素的顶端距离加上元素的高
document.all.divShow.style.pixelTop = top + el.offsetHeight; 
document.all.divShow.style.display = "block";
}
</script>
<style>
#divShow 
{
width:150px;
height:180px;
border-width:thin;
background:yellow;
}
</style>
<input type="text" οnfοcus="showDiv(this);">
<div id="divShow" style="display:none;position:absolute;">显示的内容</div>

注：offsetLeft和OffsetTop不是获得元素和页面的距离，只是获得元素和父元素的的距离
所以要进行while循环一层层累加距离，最后得到元素和页面之间的距离
层次关系：本元素->父元素->……>body->null，当为null时，退出while循环

点击后的最终效果：）