jQuery中position()方法的使用

上一篇博文说了，我们可以利用JQ中的offset()方法获取或赋值给一个指定元素在视窗中的偏移的坐标值，那么就今天记录一下JQ中的position()方法，这个方法与上一篇说的offset()方法有很多相似的地方

jQuery中position()方法

jQuery中position()方法：获取或赋值给指定元素相当于元素的坐标值的方法

语法：

$(selector).position();

注：同样它也有两个属性值，一个是left，一个top，单位都PX像素

让我们来举个栗子

利用jQuery中position()方法获取坐标

代码示例图

html代码

<div class="mochu">
    <p class="elemnt">
        这里P标签元素的内容！
    </p>
</div>

CSS代码

CSS代码示例图

.mochu{
    position:absolute;
    height:200px;
    width:200px;
    top:50px;
    left:50px;
    background-color: brown;
}
.elemnt{
    left: 10px;
    top:10px;
    height: 20px;
    line-height: 20px;
    background-color: aqua;
    color: rgb(4, 12, 12);
}

JQ代码

$("#mochu").click(function(){
    var $position = $(".elemnt").position();
    alert("上为:"+$position.top+"px  "+"左为:"+$position.left+"px");
})

结果如下：

offset()方法与position()方法区别

1、position()方法时事实上是把该元素当绝对定位来处理，获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。

2、使用position()方法时如果其所有的父元素都为默认定位（static）方式，则其处理方式和offset()一样，是当前窗口的相对偏移 

3、offset()方法不管该元素如何定位，也不管其父元素如何定位，都是获取的该元素相对于当前视口的偏移