jquery学习:获取位置position(),offset(),scrollTop困惑

学习jquery定位的三个函数:offset,position,scrollTop/scrollLeft感觉困惑较大

(1)offset:获取当前元素相对于文档的高度。只对可见元素有效。

  (2) position:获取元素相对于最近的一个position为relative or absolute的元素的祖父节点的相对偏移。

 (3)scrollTop/scrollLeft是分别获取元素滚动条距顶端的距离。

测试代码:

<body height="1500px">
<div style="position:relative;margin-top:1000px;height:300px;border:1px solid #0C6;">
<p style="margin:50px;">compute my height</p>
</div>
</body>

 在firebug中得到的结果为:

$('div').offset() 
top:1000;left:8;
$('p').offset()
top:1051;left:9;
$('div').scrollTop()=0;$('div').scrollLeft()=0;
$('p').position();
top:0 ;left:0;

 这个结果感觉很奇怪,第一二个结果还是意料之中,但是第三个是将滚动条拉到最下方的时算出的结果。

改了css的几个属性,更奇怪的事情出现了。

<body style="height:1500px;">
<div style="position:relative;margin-top:1000px;height:300px;">
<p style="padding:50px;">compute my height</p>
</div>
</body> 
$('div').offset() 
top:1000;left:8;
$('p').offset()
top:1000;left:8;
$('div').scrollTop()=0;$('div').scrollLeft()=0;
$('p').position();
top:0 ;left:0;
 

 

 

padding不起作用了!!!

继续做修改:

<body style="height:1500px;">
<div style="position:relative;margin-top:1000px;height:300px;border:1px solid #666;">
<p style="padding:50px;">compute my height</p>
</div>
</body>

 

$('div').offset() 
top:1000;left:8;
 $('p').offset()
 top:1017;left:9;
$('div').scrollTop()=0;
$('div').scrollLeft()=0;
$('p').position();
top:0 ;left:0;

 天呀,加了一个border而已,怎么p的offset.top变成了1017。。怎么可能得到这样的数字,打破脑袋都想不清楚啊。。。

posted @ 2011-10-31 20:18  七月天青  阅读(3134)  评论(2编辑  收藏  举报