定位应用:点击一个按钮,然后在按钮的右边弹出一个提示框
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像素的距离。

参考http://js8.in/602.html中的结论:

使用position()方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置

使用position()方法时如果其所有的父元素都为默认定位(static)方式,则其处理方式和offset()一样,是当前窗口的相对偏移

使用offset()方法不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移

转:http://desert3.iteye.com/blog/1561965

jQuery offset,position,offsetParent,scrollLeft,scrollTop html控件定位 css position的更多相关文章

  1. asp.net mvc中使用jquery H5省市县三级地区选择控件

    地区选择是项目开发中常用的操作,本文讲的控件是在手机端使用的选择控件,不仅可以用于实现地区选择,只要是3个级别的选择都可以实现,比如专业选择.行业选择.职位选择等.效果如下图所示: 附:本实例asp. ...

  2. jquery获取含有某元素的的控件 “控件名[属性名=值]”

    jquery获取含有某元素的的控件 “控件名[属性名=值]”. 如,获取 <input id="${cheackbox}" data-role="icheck&qu ...

  3. 基于Jquery WeUI的微信开发H5页面控件的经验总结(2)

    在微信开发H5页面的时候,往往借助于WeUI或者Jquery WeUI等基础上进行界面效果的开发,由于本人喜欢在Asp.net的Web界面上使用JQuery,因此比较倾向于使用 jQuery WeUI ...

  4. DOM学习控件定位和案例

    Dom中有多种定位属性,下面是一个简单案例 <html><!--制作一个会跟着鼠标走的图像,还有控件定位的案例--> <head> <title>doc ...

  5. 转载:Robotium之Android控件定位实践和建议(Appium/UIAutomator姊妹篇)

    来源于:http://blog.csdn.net/zhubaitian/article/details/39803857 1. 背景 为保持这个系列的一致性,我们继续用SDK自带的NotePad实例应 ...

  6. Robotium之Android控件定位实践和建议(Appium/UIAutomator姊妹篇)

    本人之前以前撰文描写叙述Appium和UIAutomator框架是怎样定位Android界面上的控件的. UIAutomator定位Android控件的方法实践和建议 Appium基于安卓的各种Fin ...

  7. 【转】Appium基于安卓的各种FindElement的控件定位方法实践

    原文地址:http://blog.csdn.net/zhubaitian/article/details/39754041#t11 AppiumDriver的各种findElement方法的尝试,尝试 ...

  8. Appium基于安卓的各种FindElement的控件定位方法实践和建议

    AppiumDriver的各种findElement方法的尝试,尝试的目标应用是SDK自带的Notepad应用. 1. findElementByName 1.1 示例 el = driver.fin ...

  9. appium简明教程(10)——控件定位基础

    狭义上讲,UI级的自动化测试就是让机器代替人去点来点去的过程. 但机器去点什么(点上面还是点左边),怎么点(是长按还是轻触),这些东西是必须由代码的编写者所指示清楚的. 控件定位就是解决机器点什么的问 ...

随机推荐

  1. iOS KVC详细讲解

    iOS KVC详细讲解 什么是KVC? KVC即NSKeyValueCoding,就是键-值编码的意思.一个非正式的 Protocol,是一种间接访问对象的属性使用字符串来标识属性,而不是通过调用存取 ...

  2. 实战CENTOS6.5安装docker并创建asp.net mvc 5 镜像,运行MVC 网站

    Docker,容器,让研发.测试.生产同一环境,可在linux平台上混合使用JAVA与net 程序 Centos6.5安装docker 参考http://my.oschina.net/kcw/blog ...

  3. UEditor无法复制的解决方法

    今天终于知道UEditor不能复制的真正原因啦,还是自己一直没有仔细研究. UEditor 粘贴 Excell 中的表格时报错导致无法粘贴的解决办法 在UEditor一些版本中,如果粘贴Excell中 ...

  4. 什么是XMLA-- XML for Analysis

    在我刚开始接触OLAP时,同事就告诉我 XMLA会让他使用更方便. 什么是XMLA? Providers 供应商 ActivePivot Hyperion Essbase IBM Infosphere ...

  5. 跨域iframe的高度自适应

    If you cannot hear the sound of the genuine in you, you will all of your life spend your days on the ...

  6. yii2 GridView 日期格式化并实现日期可搜索 案例

    作者:白狼 出处:http://www.manks.top/article/yii2_gridview_dateformat_search 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且 ...

  7. WebService的介绍概念 收藏

    WebService学习总结(二)——WebService相关概念介绍 一.WebService是什么? 1. 基于Web的服务:服务器端整出一些资源让客户端应用访问(获取数据) 2. 一个跨语言.跨 ...

  8. android双击返回键退出程序的实现

    /** * 菜单.返回键响应 */ @Override public boolean onKeyDown(int keyCode, KeyEvent event) { // TODO Auto-gen ...

  9. dotNET使用DRPC远程调用运行在Storm上的Topology

    Distributed RPC(DRPC)是Storm构建在Thrift协议上的RPC的实现,DRPC使得你可以通过多种语言远程的使用Storm集群的计算能力.DRPC并非Storm的基础特性,但它确 ...

  10. 烂泥:Linux系统与windows系统文件同步

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 上篇文章中,我们介绍了有关Linux系统之间的文件同步,这篇文章我们来介绍下,有关Linux系统与windows系统,以及windows系统与windo ...