javascript - jquery position没有获取到相对于父元素的偏移量 而是父元素相对于视口的偏移量

Question

rt:jquery的position()方法获取的是父元素相对于视口的偏移量 这是为何 不是获取相对于父元素的偏移量么？

css代码：

.wrapper {
            width:300px;
            height:200px;
            background: #5bc0de;
            margin: 0 auto;
            /*padding-top:1px;*/
            /*border:1px solid transparent;*/
            overflow: hidden;

        }
        .wrapper .btn {
            width:80px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            border:1px solid #fff;
            margin:0 auto;
            background: #efefef;
            color:#d9543f;
            margin-top:40px;
            cursor: pointer;
        }

html代码：

<p class="wrapper">
    <p class="btn">click</p>
</p>

js代码：

    $(".btn").click(function(e) {
        var off = $(this).offset();
        console.log(off);
        var pos = $(this).position();
        console.log(pos);
        // console.log("left : "+pos.left);
        // console.log("top : "+pos.top);
    })

浏览器上的效果：

Answer 1

position() 方法是相对于 offsetParent 而言，offsetParent 指所有父级元素中距离最近的定位元素(relative or absolute)。

.wrapper { position: relative;}

Run test agin!