設定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