jquery获取html元素的绝对位置和相对位置的方法


Posted in Javascript onJune 20, 2014

绝对位置坐标:

$("#elem").offset().top

$("#elem").offset().left

相对父元素的位置坐标:

$("#elem").position().top

$("#elem").position().left

另:
static(默认):默认定位方式。
relative(相对定位):在static的基础上,相对元素本来的位置变化,通过设定top,bottom,left,right实现。
absolute(绝对定位):是相对父元素来说的,如果父元素中有relative,那么该元素的位置是经过计算后的结果。即absolute定位的参照物是“上一个定位过的父元素(static不算)”。绝对定位会使元素从文档流中被删除。
fixed(固定定位):fixed定位的参照物总是当前的文档。利用fixed定位,很容易让一个div定位在浏览器文档的左上,右上等方位。

Javascript 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
javascript中简单的进制转换代码实例
Oct 26 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 Javascript
JavaScript实现图片自动加载的瀑布流效果
Apr 11 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
vue中的模态对话框组件实现过程
May 01 Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 #Javascript
javascript 控制input只允许输入的各种指定内容
Jun 19 #Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 #Javascript
对之前写的jquery分页做下升级
Jun 19 #Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
Jun 19 #Javascript
jQuery常用操作方法及常用函数总结
Jun 19 #Javascript
javascript使用正则控制input输入框允许输入的值方法大全
Jun 19 #Javascript
You might like
PHP性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
克隆javascript对象的三个方法小结
2011/01/12 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
仅用50行Python代码实现一个简单的代理服务器
2015/04/08 Python
Python3写入文件常用方法实例分析
2015/05/22 Python
Tensorflow 1.0之后模型文件、权重数值的读取方式
2020/02/12 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
使用Keras加载含有自定义层或函数的模型操作
2020/06/10 Python
学python需要去培训机构吗
2020/07/01 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
澳大利亚在线家具店:Luxo Living
2019/03/24 全球购物
高级人员简历的自我评价分享
2013/11/03 职场文书
交通事故检查书范文
2014/01/30 职场文书
2014年转正工作总结
2014/11/08 职场文书
团员年度个人总结
2015/02/26 职场文书
小学生节水倡议书
2015/04/29 职场文书
实现一个简单得数据响应系统
2021/11/11 Javascript
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技