jQuery之美——offset()与position()

版权声明：黄河爱浪，[email protected]， https://blog.csdn.net/u013350495/article/details/82534003

上篇回顾：jQuery之美——筛选之is()

本篇文件向大家介绍的方法是 offset() 和 position() ，这两个方法有什么关系？下面的内容做详细介绍。

offset()功能描述：在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于文档。

position() 功能描述：获取匹配元素中第一个元素的当前坐标，相对于offset parent的坐标。( 注：offset parent指离该元素最近的而且被定位过的祖先元素 ) 。

这两个方法的功能都是获取元素的坐标。相信大家使用的一般都是 offset() 方法而几乎不知道  position() 方法，因为网上所得到的答案几乎都是千篇一律的 offset() 方法。

既然功能一样，却又存在两个方法，那么他们肯定有不同。我们经常需要计算一个元素的相对坐标。通过当前元素与参照元素计算后得知。大jQuery为了方便开发者，专门提供了 position() 方法来解决这个问题。请看下面的代码

/* CSS */
#div1{
    position: relative;
    margin: 100px auto;
    width: 300px;
    height: 300px;
    border: #e5e5e5 solid 1px;
}
#div2{
    position: absolute;
    width: 50px;
    height: 30px;
    background-color: #e5e5e5;
    left: 123px;
    top: 66px;
    margin: 22px 0 0 45px;
}

<!-- html -->
<div id="div1">
    <div id="div2"></div>
</div>

/* js */
console.log($("#div2").offset());
//  {top: 189, left: 273}
console.log($("#div2").position());
//  {top: 66, left: 123}

通过上面的代码得知，position() 非常方便的帮助我们计算了 #div2 元素 相对于 #div1 的坐标。这是一个好方法，但是它也有要求。那就是它所参照的父元素一定要是 position: relative 的元素。

大家可以从看完这篇文章开始，合理的使用 position() 方法吧，很方便有木有。

如果你阅读这篇文章后，有一丢丢的小疑惑，建议你去巩固CSS盒子模型知识。写好一手布局，才能写好一手脚本。

下篇预告：jQuery之美——测试操作

更多精彩文章，敬请持续关注——WEB前端梦之蓝

用微信扫描下方的二维码可直接关注该公众号哦，或者打开微信公众号搜索 “web-7258”，关注后会在第一时间将最新文章推送给您哦