HTML元素的位置与定位

讨论在元素位置计算中，元素的定位属性(position)对offsetParent和真实相对偏移元素的影响。

经过多次测试，发现用javascript取得元素的offsetParent和offsetLeft/offsetTop时，与元素本身和其上溯父级元素的position属性有很大的关系。有时候要计算的元素真实相对偏移的元素并不是offsetParent。所以对各种情况进行了详细的对比，发现除了浏览器不同，元素的offsetParent和真实相对偏移的元素受两方面因素影响：一是元素自身的定位方式；二是元素上溯的父级元素，比如向上搜索的首个非position:static元素可能会成为那个offsetParent。而在IE下还会受到上溯元素是否具有layout的影响。

下面的两个表格，是测试得到的结论。不同的横行代表要测算的元素在不同定位下的情况，纵列则代表上溯到首个相关属性的父级（如上溯的到则用parent表示上溯到的父级），“-”代表上溯到顶都没有特殊属性的父级，而白色单元格里的两行分别代表：

• offsetParent
• 真实相对偏移的元素

图注：

1. IE中hasLayout一列除了static的情况，其他上溯父级在abs或rel的情况下计算更优先。
2. Σ=Σ(parents(hasLayout).borderWidth)，即上溯到计算相对偏移的元素之前所有具有layout父级的边框宽度之和。

页面设置的基本css和例子：

html{border:10px dotted #eee;}
body{margin:10px;}
div{padding:20px; border:5px solid #ccc;}

button