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

定位应用:点击一个按钮,然后在按钮的右边弹出一个提示框
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像素的距离。
原文地址:https://www.cnblogs.com/huangyin1213/p/5567268.html