本文主要是介绍jQuery 获取元素位置 offset() 和 position()，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
本篇文件向大家介绍的方法是 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盒子模型知识。写好一手布局，才能写好一手脚本。
作者：黄河爱浪 QQ：1846492969，邮箱：helang.love@qq.com
微信公众号：
web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。更多精彩文章，请扫下方二维码关注我的公众号
这篇关于jQuery 获取元素位置 offset() 和 position()的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
