<!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 runat="server"> <title>test</title> <link href="Styles/Site.css" type="text/css" /> <style type="text/css"> *{ margin:0; padding:0; } #div1{ width:500px; height:500px; margin:100px; position:relative; background-color:#CCCCCC; } #div2{ width:300px; height:300px; position:absolute; left:30px; background-color:#0099ff;} #div3{ width:100px; height:100px; position:absolute; left:30px; background-color:Red; } </style> <script type="text/javascript"> window.onload = function () { var left = 0; //存放left值 var obj = document.getElementById("div3"); while (obj) { //如果這個obj存在的話 left = parseInt(left) + obj.offsetLeft; obj = obj.offsetParent; //obj變成自己的parent,一層一層向上迴圈累加left的值,直到obj不存在 } document.getElementById("div3").innerHTML = left; } </script></head><body> <form id="form1" runat="server"> <div id="div1"> <div id="div2"> <div id="div3"> 0 </div> </div> </div> </form></body></html>