<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{margin:0;padding:0;font-size:12px;font-family:Arial,"宋体";backgorund:#fff;}/*文档清零,字体,字号,背景设置.*/
div,ul,li,p,form,h1,h2,h3,h4,h5,input,dl,dt,dd,fieldset,table,tr,td{margin:0;padding:0;}/*边界元素清零*/
ul,li,ol{list-style:none;}/*去除列表符号*/
img{border:none;}/*去除图片按钮边框*/
a{text-decoration:none;}/*去除超链接下划线*/
img,input,textarea{vertical-align:middle;}
#outer{ width:300px; height:300px; background:#FCC; position:absolute;
border:30px solid #036; padding:10px; left:200px;}
#middle{width:200px; height:200px; margin-left:100px; background:#CC6}
#inner{width:100px; height:100px; background:#F93; float:right}
</style>
</head>
<body>
<div id="outer">
外面outer
<div id="middle">
中间middle
<div id="inner">
最里层inner
</div>
</div>
</body>
</html>
<script type="text/javascript">
function getPos(ele){
var p=ele.offsetParent;
var left=ele.offsetLeft;
while(p){
if(window.navigator.userAgent.indexOf("MSIE 8")>-1){
left+=p.offsetLeft;
}else{
left+=p.offsetLeft+p.clientLeft;
}
p=p.offsetParent;
//left+=p.offsetLeft;
// p=p.offsetParent;
}
var obj={};
obj.x=left;
return obj;
}
var o=getPos(inner);
console.log(o.x)
</script>