在jQuery中，有些時候我們需要獲取元素的具體位置，然後進行必要操作。例如 學習網的“在線調色板”中，就是根據元素的位置來確定顏色值的。
在jQuery中，如果我們想要獲取元素的位置，有2種方法：
在jQuery中，我們可以使用offset()方法用於“獲取”或“設置”元素相對於“當前文檔”（也就是浏覽器窗口）的偏移距離。
語法：
$().offset().top; $().offset().left
說明：
$().offset()返回的是一個坐標對象，該對象有2個屬性：top和left。
$().offset().top表示獲取元素相對於當前文檔“頂部”的距離。
$().offset().left表示獲取元素相對於當前文檔“左部”的距離。
這兩種方法返回的都是一個數字（不帶單位）。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
text-align:center;
}
#main
{
text-align:left;
margin:100px auto;
padding:15px;
border:1px dashed gray;
display:inline-block;
}
#box1,#box2
{
display:inline-block;
height:100px;
width:100px;
}
#box1
{
background-color:Red;
}
#box2
{
background-color:Orange;
}
</style>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
//獲取box2距離頂部的距離
var top = $("#box2").offset().top;
//獲取box2距離左部的距離
var left = $("#box2").offset().left;
var str = "box2與文檔頂部距離是：" + top + "\n" + "box2與文檔左部距離是：" + left;
alert(str);
})
})
</script>
</head>
<body>
<div id="main">
<div id="box1"></div><br />
<div id="box2"></div><br />
<input id="btn" type="button" value="獲取" />
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
當我們點擊“獲取”按鈕，就可以獲取id為box2的元素相對當前文檔頂部距離以及左部距離。
在jQuery中，我們可以使用position()方法來“獲取”或“設置”當前元素相對於“其被定位的祖輩元素”的偏移距離。
語法：
$().position().top $().position().left
說明：
$().position()返回的是一個坐標對象，該對象有2個屬性：top和left。
$().position().top表示元素相對於被定位的祖輩元素的頂部的垂直距離。
$().position().left表示元素相對於被定位的祖輩元素的左部的水平距離。
這兩種方法返回的都是一個數字（不帶單位）。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#father
{
position:relative;
width:200px;
height:200px;
background-color:orange;
}
#son
{
position:absolute;
top:20px;
left:50px;
width:50px;
height:50px;
background-color:red;
}
</style>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
var top = $("#son").position().top;
var left = $("#son").position().left;
var str = "子元素相對父元素頂部距離是：" + top + "\n" + "子元素相對父元素左部距離是：" + left;
alert(str);
})
})
</script>
</head>
<body>
<div id="father">
<div id="son"></div>
</div>
<input id="btn" type="button" value="獲取" />
</body>
</html>
在浏覽器預覽效果如下：
分析：
當我們點擊“獲取”按鈕之後，就可以獲取所選元素相對父元素的垂直相對距離以及水平相對距離。在CSS定位布局中，如果我們對父元素設置position:relative，我們就可以使用position:absolute來設置子元素相對於父元素的定位距離，這就是我們常說的“外相對，內絕對”。如果大家對這個例子不太懂的話，建議先去打好CSS基礎先。
在web應用開發中，獲取元素的坐標是非常常見的操作。jQuery的offset()和position()的結合使用，方便我們快速獲取元素坐標，大家必須予以重視。當然在以後教程中，我們會結合這些技術給大家講解實際開發的綜合應用實例。