设置DIV的绝对位置

• 1. 设置 DIV的绝对位置(3566)
• 2. JQuery 越来越好之——放大镜效果(1999)
• 3. CodeSmith 快速入门系列(1035)
• 4. DataTable 转换为List<Model>的通用类(631)
• 5. CodeSmith 快速入门之四：模型层的生成(603)

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

 

虽然操作是很简单，但是相信大多数人都是“拿来主义”者，不会关心代码。
呵呵，其实今天自己也是被问到了，所以特别关注了一下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.getElement("divShow").style.pixelTop  =  top  +  el.offsetHeight;  
        document.getElement("divShow").style.display  =   " block " ;
    }
</ script >
< style >
    #divShow 
     {
        width : 150px ;
        height : 180px ;
        border-width : thin ;
        background : yellow ;
     }
</ style >
< input  type ="text"  onfocus ="showDiv(this);" >
< div  id ="divShow"  style ="display:none;position:absolute;" > 显示的内容 </ div >

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

点击后的最终效果：）

原文地址： http://www.cnblogs.com/cj/archive/2008/10/17/1313643.html