jQuery中的offset方法和position方法

​今天我们来学习一下jQuery中的offset()方法和position()方法，先上初始代码:

image

jQuery代码：

image

运行结果：

image

接下来在父元素身上添加：position:relative

接下来再给父元素身上添加：margin-top:50px

image

大家可以在以上代码的基础上再给父元素添加padding-top或者再最外面添加一个父元素进行测试。

小结：

1 元素的offset()方法获取到的是子元素到文档（水平方向和垂直方向的）距离(偏移)。

2 元素的position()方法获取到的是子元素距离自己最近的带有定位属性的父盒子(水平和垂直方向的)距离(偏移)。