jQuery offset，position，offsetParent，scrollLeft，scrollTop html控件定位 css position

Posted 2020-07-22 黄银

定位应用：点击一个按钮，然后在按钮的右边弹出一个提示框
1，提示框相对于屏幕进行定位，那么使用offset来取得当前按钮相对于body的top和left，然后通过$(‘body‘).prepend(tipContent);把提示控件加到body下
注意tipContent采用absolute定位，并设置top，left的值，当把tipContent加到body的最前面时，由于tipContent前面没有任何东西，因此它就是以body为基准根据top，left的值进行定位

1. $(this).offset().left;  
2. $(this).offset().top;  
3. $(‘body‘).prepend(tipContent);  

2，提示框相对于点击的按钮进行定位(即提示框出现在按钮的旁边)，那么使用position来取得当前按钮相对于offset parent的top和left，，然后通过$(this).after(tipContent);;把提示控件加到按钮的后面(兄弟节点)，因此被追加的提示控件的offset parent和按钮的offset parent一定是相同的！，也就变相达到了提示控件相对于 按钮 进行定位的效果！

// 注意tipContent采用absolute定位，当把tipContent加到按钮后面后（兄弟节点，他们有相同的offset parent）

// absolute：绝对定位，元素相对于它的第一个被定位的祖先元素（offset parent非static）来进行定位,由于按钮和提示控件并排在一起，不管 被用来作为基准的第一个被定位的祖先元素（非static）是谁，按钮和提示控件相对于 基准控件的top，left距离都是可以简单地通过+-进行平移操作！

1. $(this).position().left;  
2. $(this).position().top;  
3. $(this).after(tipContent);  

offset:偏移、平移、位移

offset():获取匹配元素集合中的第一个元素相对于document的当前坐标值（相对于body左上角的left， top的值）。
返回的对象包含两个整形属性：top 和 left。
如果把一个元素定位到已经存在的元素的上面（特别地做拖拽操作的时候）， .offset()方法更加有用。

position():获取当前匹配元素集合中的第一个元素相对于offset parent的当前坐标值（相对于offset parent元素左上角的left， top的值）。
返回的对象包含两个整形属性：top 和 left。
如果要让一个元素靠近另外一个元素进行定位，并且这2个元素被包含在另外一个DOM元素中， .position()方法更加有用。

jquery不支持取得相对于隐藏元素、或者包含borders, margins, padding属性的body元素的坐标。（对offset（）和position（）方法都是！）

offsetParent()：取得被定位后最近的祖先元素！
给你一个jQuery对象，它的offsetParent()方法会在 DOM树中搜索所有这个jQuery对象的祖先元素，并返回一个表示离这个元素最近的祖先元素的jQuery对象。
一个元素说被定位指的是它包含一个CSS定位属性（position）,并且其值为relative,absolute或者fixed。其值不是css position属性的默认值static！

offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。
如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。
当容器元素的style.display 被设置为 "none"时（译注：IE和Opera除外），offsetParent属性 返回 null。

scrollLeft()：获取匹配元素集合中的第一个元素相对于水平滚动条左边的距离。
这个距离等于从被选中元素到水平滚动条左边的像素值。如果滚动条非常左、或者元素不能被滚动，那么这个值为0.

scrollTop()：获取匹配元素集合中的第一个元素相对于纵向滚动条上边的距离。
这个距离等于从被选中元素到纵向滚动条上边的像素值。如果滚动条非常上、或者元素不能被滚动，那么这个值为0.

注意：当一个元素被隐藏后，调用scrollTop， scrollLeft（）或者animate()方法是不会正常工作的。

css position属性：position属性指出一个元素的定位方法。有4种可能值：static, relative, absolute or fixed：

• static：默认值，元素按照在文档流中出现的顺序渲染
• absolute：绝对定位，元素相对于它的第一个被定位的祖先元素（非static）来进行定位
• fixed：元素相对于浏览器window进行定位
• relative：元素相对与它的正常位置进行定位，因此"left:20"就表示在元素正常位置的基础上，左移20像素的距离。