查看元素

情况1 <div style="width:300px;height:300px; border:2px solid black; position:relative; top:100px;left:100px;">
<!--情况2 <div style="width:300px;height:300px; border:2px solid black; margin-top:100px;margin-left:100px;"> -->
            
      情况1<div class="demo" style="width:100px;height:100px; position:absolute; top:100px;left:100px;background-color:red;"></div>
      <!--情况2 <div class="demo" style="width:100px;height:100px; position:absolute; margin-top:100px;margin-left:100px;background-color:red;"></div> -->
        
</div>

<script type="text/javascript"> 查看元素的尺寸dom.offsetWidth,dom.offsetHeight

查看元素的位置 dom.offsetLeft,dom.offsetTop

对于--无定位---父级的元素，返回---相对文档--的坐标。对于 --有定位-- 父级的元素，返回相对于最近的---有定位的父级的坐标---

忽略自身是不是定位元素，求的这个元素距离它有定位的父级的距离，不管是定位还是margin都一样返回值。这里的left指的是横向上的距离

dom.offsetParent返回最近的有定位的父级，如无，返回body,body.offsetParent

        var div = document.getElementsByTagName("div")[0];
        var div = document.getElementsByClassName('demo')[0];