可以先看看效果:http:///keleyi/phtml/jquery/6.htm
以下是完整代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery獲取div等元素的相對位置 - </title>
<script type="text/javascript" src="http:///keleyi/pmedia/jquery-1.9.1.min.js"></script>
</head>
<body>
<div style="position:relative;padding:10px;border:solid 1px green;">
<div style="padding:26px 50px 30px 35px;border:solid 1px black;position:static;">
<div id="keleyi_com" style="width:500px;border:1px solid silver;height:120px">本DIV的id為keleyi_com;<br />為歡迎訪問http://</div></div>
</div>
<div id="tips_keleyi_com"></div><a href="http:///a/bjac/lgg5u5qk.htm" target="_blank">原文</a>
<script type="text/javascript">
$(document).ready(
function () {
var position = $("#keleyi_com").position();
$("#tips_keleyi_com").text("jquery動態獲取上面div(id為keleyi_com)的與它的第一個position為relative的父元素的相對位置為:距頂部" + position.top + ",距左邊" + position.left);
}
)
</script>
</body>
</html>