jQuery中position用法

position() 方法返回匹配元素相对于父元素的位置（偏移）。
所谓"被定位的元素"，就是元素的CSS position属性值为absolute、relative或fixed(只要不是默认的static即可)。
该方法返回的对象包含两个整型属性：top 和 left，以像素计。
此方法只对可见元素有效。
必须在他本身设置left与top值，该物体还必须显示不可以隐藏，必须要有定位。
与offset()不同的是：position()返回的是相对于被定位的祖辈元素的坐标，offset()返回的是相对于当前文档的坐标。此外，position()函数无法用于设置操作。如果当前元素的祖辈元素全部都是默认定位(static)，那么该函数返回的偏移位置与offset()函数相同。
h2的祖辈元素全部为默认定位，则position()返回的偏移位置和offset()函数一致。
html代码

<div><h1>zz</h1></div>
    <p>hh</p>
    <h2>ssss</h2>

css代码

*{
        margin:0;
        padding:0;
    }
    div{
        width:100px;
        height:100px;
        background:red;
        margin:500px auto;
        position:absolute;
        left:20px;
        top:20px;
    }
    p{
        display:none;
        position:relative;
        left:50px;
        top:50px;
    }
    h1{
        position:relative;
        left:10px;
        top:10px; 
    }
    h2{
        left:50px;
        top:100px;
    }

js代码

    var a=$("div").position();
       var a1= $("div").offset();
       console.log(a.left);//20
       console.log(a.top);//20
       console.log(a1.left);//441
       console.log(a1.top);//520
       //隐藏时无论position还是offset都无法获取到left、top值
       var b=$("p").position();
       var b1=$("p").offset(); 
       console.log(b.left);//0
       console.log(b.top);//0
       console.log(b1.left);//0
       console.log(b1.top);//0
       var c=$("h1").position();
       var c1=$("h1").offset();
       console.log(c.left);//10
       console.log(c.top);//10
       console.log(c1.left);//451
       console.log(c1.top);//530
       //祖辈元素全部为默认定位，则position()返回的偏移位置和offset()函数一致。
       var d=$("h2").position();
       var d1=$("h2").offset();
       console.log(d.left);//0
       console.log(d.top);//1100
       console.log(d1.left);//0
       console.log(d1.top);//1100