DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> offsetParent 算法分析
offsetParent 算法分析
編輯:JavaScript基礎知識     

當調用元素 A 的 offsetParent 屬性時,必須按以下算法返回元素。

以下任一條件為真時,返回 null,並停止本算法。
A 是根元素。
A 是 HTML 的 body 元素。
元素 A 的 position 屬性計算值是 fixed。注 1
如果 A 是 HTML 元素 area,並且在其上級元素鏈中有 HTML 元素 map,返回上級元素鏈中距 A 最近的 HTML 元素 map,並停止本算法。注 2
如果以下任一條件為真時,返回距 A 最近的符合下述條件的上級元素,並停止本算法。
上級元素的 position 屬性計算值不是 static。注 3
上級元素是 HTML 的 body 元素。注 4
A 的 position 屬性計算值是 static,上級元素是 td、th 或 table。
返回 null。
前面已經提到,以上是工作草案的內容,所以與現行的浏覽器不一定一致,注釋如下:

注 1 Firefox 不適用;IE 6 不適用;DOCTYPE 使 IE 7 不支持 fixed 時不適用(以下簡稱 IE 6 模式)。
注 2 Firefox 不適用。
注 3 上級元素的 position 屬性計算值是 fixed,並且 IE 6 或者 IE 6 模式不適用。
注 4 IE 7 模式中,如果元素的 position 屬性計算值是 absolute 或 relative,返回元素 HTML,而不是 BODY。
總結

由此看出,獲得 offsetParent 在各個浏覽器中,各個浏覽器的各個版本中,同一版本的不同模式中,都有不同的算法,實在有些麻煩。所以還是建議將其理解為通過 offsetParent 循環和 offsetLeft、offsetTop 可以獲得控件在浏覽器中的絕對位置即可。

但慶幸的是有一種常見布局在各種浏覽器中 offsetParent 是一樣的,那就是:外層元素 div 的 position 計算值是 relative、absolute 時,內層元素 div 的 offsetParent 總是外層元素 div。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved