jQuery offset，position，offsetParent，scrollLeft，scrollTop html控件定位 css position属

[color=blue]定位应用：点击一个按钮，然后在按钮的右边弹出一个提示框[/color]
1，提示框相对于屏幕进行定位，那么使用offset来取得当前按钮相对于body的top和left，然后通过$('body').prepend(tipContent);把提示控件加到body下
注意[color=red]tipContent采用absolute定位[/color]，并设置top，left的值，当把tipContent加到body的最前面时，[color=red]由于tipContent前面没有任何东西，因此它就是以body为基准[/color]根据top，left的值进行定位

$(this).offset().left;
$(this).offset().top;
$('body').prepend(tipContent);

2，提示框相对于点击的按钮进行定位(即提示框出现在按钮的旁边)，那么使用position来取得当前按钮相对于offset parent的top和left，，然后通过$(this).after(tipContent);;把提示控件加到按钮的后面[color=red](兄弟节点)，因此被追加的提示控件的offset parent和按钮的offset parent一定是相同的！[/color]，也就变相达到了提示控件相对于 按钮 进行定位的效果！

// 注意tipContent采用absolute定位，当把tipContent加到按钮后面后（兄弟节点，他们有相同的offset parent）

// absolute：绝对定位，元素相对于它的第一个被定位的祖先元素（offset parent非static）来进行定位,[color=red]由于按钮和提示控件并排在一起，不管 被用来作为基准的第一个被定位的祖先元素（非static）是谁[/color]，按钮和提示控件相对于 基准控件的top，left距离都是可以简单地通过+-进行平移操作！

$(this).position().left;
$(this).position().top;
$(this).after(tipContent);

[b]offset:偏移、平移、位移[/b]

[b]offset()[/b]:获取匹配元素集合中的第一个元素[color=red]相对于document的当前坐标值[/color]（相对于body左上角的left， top的值）。
返回的对象包含两个整形属性：top 和 left。
如果[color=red]把一个元素定位到已经存在的元素的上面[/color]（特别地做拖拽操作的时候）， .offset()方法更加有用。

[b]position()[/b]:获取当前匹配元素集合中的第一个元素[color=red]相对于offset parent的当前坐标值[/color]（相对于offset parent元素左上角的left， top的值）。
返回的对象包含两个整形属性：top 和 left。
如果要让[color=red]一个元素靠近另外一个元素进行定位，并且这2个元素被包含在另外一个DOM元素中[/color]， .position()方法更加有用。

jquery不支持取得相对于隐藏元素、或者包含borders, margins, padding属性的body元素的坐标。[color=blue]（对offset（）和position（）方法都是！）[/color]

[b]offsetParent()[/b]：取得被定位后最近的祖先元素！
给你一个jQuery对象，它的offsetParent()方法会在 [color=red]DOM树中搜索所有这个jQuery对象的祖先元素，并返回一个表示离这个元素最近的祖先元素的jQuery对象[/color]。
一个元素说被定位指的是它包含一个CSS定位属性（position）,并且其值为[color=blue]relative,absolute或者fixed[/color]。[color=red]其值不是css position属性的默认值static！[/color]

offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。
如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。
当容器元素的style.display 被设置为 "none"时（译注：IE和Opera除外），offsetParent属性 返回 null。

[b]scrollLeft()：[/b]获取匹配元素集合中的第一个元素[color=red]相对于水平滚动条左边[/color]的距离。
这个距离等于从被选中元素到水平滚动条左边的像素值。[color=blue]如果滚动条非常左、或者元素不能被滚动，那么这个值为0.[/color]

[b]scrollTop()[/b]：获取匹配元素集合中的第一个元素[color=red]相对于纵向滚动条上边[/color]的距离。
这个距离等于从被选中元素到纵向滚动条上边的像素值。[color=blue]如果滚动条非常上、或者元素不能被滚动，那么这个值为0.[/color]

[color=blue]注意：当一个元素被隐藏后，调用scrollTop， scrollLeft（）或者animate()方法是不会正常工作的。[/color]

css position属性：position属性指出[color=red]一个元素的定位方法[/color]。有4种可能值：static, relative, absolute or fixed：
[list]
[*]static：默认值，元素按照在文档流中出现的顺序渲染
[*]absolute：绝对定位，元素相对于它的[color=red]第一个被定位的祖先元素（非static）[/color]来进行定位
[*]fixed：元素[color=red]相对于浏览器window[/color]进行定位
[*]relative：元素[color=red]相对与它的正常位置[/color]进行定位，因此"left:20"就表示在元素正常位置的基础上，左移20像素的距离。
[/list]

参考[url]http://js8.in/602.html[/url]中的结论：
使用position()方法时事实上是把[color=red]该元素当绝对定位来处理，获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置[/color]
使用position()方法时如果其所有的父元素都为[color=red]默认定位（static）[/color]方式，则其处理方式和offset()一样，是当前窗口的相对偏移
使用offset()方法不管该元素如何定位，也不管其父元素如何定位，都是获取的该元素相对于当前视口的偏移