10.3.2　确定页面上的元素的位置

确定页面上的一个元素的位置，往往是很有用的，可能当访问者的鼠标光标放置在图像上的时候，你想要在图像上显示一个工具提示。这个工具提示相对于该页面上的图像来放置，因此，你需要确定图像在页面上的什么位置，然后将工具提示放置在该位置。jQuery提供了几个函数来帮助做到这点：

·offset（）。offset（）函数返回了一个对象，其中包含一个元素距离文档的左上角偏左和偏上的位置。例如，当访问者的鼠标光标移动到一幅图像上的时候，你想要在图像顶部放置一个横跨的标题。你将需要知道图像的位置。假设图像有一个ID为captionImage。你可能像下面这样收集其顶部、左边的位置：

var imagePosition=$（'#captionImage'）.offset（）；

在这个例子中，变量imagePosition保存了图像的坐标。这些坐标存储在一个JavaScript对象中，并且可以使用本书2.10节介绍的点语法来访问。左边的位置存储在一个名为left的属性中，顶部的位置存储在一个名为top的属性中：

imagePosition.top//number of pixels from the top of the document

imagePosition.left//number of pixels from the left edge of the document

我们假设你想要使用这些信息来放置id为caption的一个div，你可以使用jQuery的.css（）函数（参见本书4.8.2节）来设置该标题的top、left和position属性：

$（'#caption'）.css（{

'position'：'absolute'，

'left'：imagePosition.left，

'top'：imagePosition.top

}）；

注意：offset（）和position（）函数总是返回数字，表示来自左边位置和顶部位置的像素数。也就是说，即便你使用ems或百分比来放置页面上的元素，这两个函数也只是获取元素的像素位置。

·position（）。position（）函数返回一个对象，其中包含了一个元素距离其最近的祖先元素的左上角偏左和偏上的位置。这需要小心一些，因此，让我们通过图10-7来看看它是如何工作的，该图显示了两个div。这两个div都是绝对定位的，outerBox相对于文档来定位，而innerBox的HTML代码位于outerBox div中，是相对于外围的框来定位的。外围的框是相对于文档来定位的（因为它没有嵌入到任何使用绝对、相对或固定定位的元素之中）。对于外围框，position（）就像offset一样起作用，因此，如下代码：

$（'#outerBox'）.position（）//{left：100，top：300}

返回了一个对象，其left属性为100，而top属性为300，因为这些都是在CSS中设置的值。

然而，在内部框的例子中，这些都是相对于外围框来定位的，对于offset（）和position（），你将得到两个不同的结果：

$（'#innerBox'）.offset（）//{left：300，top：550}

$（'#innerBox'）.position（）//{left：200，top：250}

在这个例子中，offset（）返回的位置是相对于文档的，也就是说，内部的框距离文档的左边界300像素，距离文档顶部550像素。另外，position（）函数返回了该div的CSS left和CSS top属性。

offset（）函数通常是最有用的两个函数之一，因为它允许你知道元素相对于整个页面的位置，并且提供了你将其他元素相对于该元素放置到页面上所需要的信息。

图　10-7　jQuery提供了两个函数，允许你确定一个元素在页面上的top和left位置。当你拥有一个绝对定位的元素（#innerBox），而它又位于另一个定位的元素（#outer-Box）之中的时候，这两个函数将返回不同的结果

提示：你也可以使用offset（）函数来设置页面上的一个元素的位置，只要将具有left和top值的一个对象传递给该函数即可，如下所示：

$（'#element'）.offset（{

left：100，

top：200

}）；

只能对left和top使用像素值，em值（20em）或者百分比（20%）将无效。

图　10-8：通常，一个We b页面不会完全位于访问者的浏览器窗口之中。那么，访问者必须滚动来查看页面的其他部分。即便你只是看到了文档的一部分，整个文档还是存在的